[Resolved] z-index of divs

[Erika]

Dear GP-Team,

I´d like to have a div with an image (at the moment as background) which has an opacity and on hover no opacity.

However the divs INSIDE this div should not have any opacity at any time.

Currently this is the structure:
– div with background image
– div inside set to 80px height and blue background
– div inside – might be a div too much? can be deleted?
– button with no hover-effect

Probably it is simple, I just don´t get it. I tried aroung with classes and z-indexes, but can´t figure out.

Would you have a look?

[David]

Hi there,

change your CSS to this:

.product-container-welcome:before {
    max-height: 300px;
    opacity: 0.5;
}
.product-container-welcome:hover:before {
    opacity: 1;
}

This works because your have the background image set to Pseduo element so you can use the :before pseudo selector.

Did you know, if you use GB Pro then you can use the Effects panel to do this and more 🙂

[Erika]

Hi David,

wonderful, thank you.

Yes, on our own site we use GB Pro, but unfortunately not all clients see the advantage to pay yearly.

Erika

[David]

Glad to be of help 🙂

[Author]

Posts