How to select only some figures on a page for CSS Customization

  • Unknown's avatar
    annekacom · Member ·

    Hello there !

    my question is about the images on the Portfolio section of this page : https://lx-designer.com

    My goal is to make appear those images blue on hover.

    I’m trying to apply a CSS style to those images using the class “figure” like this :

    figure {
    background-color: blue;
    }

    .wp-image-81:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    }
    (and so on for the other images)

    This works well, but the problem with the class “figure” is that the CSS applies on ALL the figures of the website. I would like to apply this css style only in the 6 images which are bellow the title “Portfolio”, and I don’t know how… Which selectors can I use ?

    Maybe someone has a clue ?

    Many thanks in advance,

    Best regards

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @annekacom, sounds like you’re almost there, and just need a more specific selector.

    Can you try adding a class to that block of images? It should be one of the options on the right, under advanced.

    For example, if you gave the block a class name of kacomportfolio your CSS might look like this:

    .kacomportfolio figure {
background-color: blue;
}

.kacomportfolio img:hover {
opacity: .5;
filter: alpha(opacity=50);
}

    You probably wouldn’t even have to specify individual images that way.

  • Unknown's avatar
    annekacom · Member ·

    Hello @Supernovia !

    thank you for your answer. I’ve just tried renaming the class as you suggested, and nothing happens. I don’t know where I did wrong…

    So, the html code goes like this with the additionnal class :

    and I put the following css :

    .kacomportfolio figure {
    background-color: #1abc9c;
    }

    .kacomportfolio img:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    }

    It seems like it doesn’t recognize the new class… What should I do ?

  • Unknown's avatar
    annekacom · Member ·

    Sorry, no, the class seems to work. But it doesn’t take the blue into account.

  • kokkieh · Staff ·

    Hi there,

    It’s not taking the color into account because you’re targeting an element that doesn’t exist.

    With .kacomportfolio figure you’re saying target the figure element that’s the child of whatever element has the .kacomportfolio class applied. As there’s no additional figure elements that are children of the one to which you added that class, there’s nothing there to target.

    If instead you change the selector there to figure.kacomportfolio, meaning the figure element with the .kacomportfolio class, or even just .kacomportfolio, it will work.

    In other words:

    .kacomportfolio {
	background-color: #1abc9c;
}
  • Unknown's avatar
    annekacom · Member ·

    Hi,

    thank you very much for your explanation, everything works fine now !
    Have a nice day !

  • The topic ‘How to select only some figures on a page for CSS Customization’ is closed to new replies.