[Solved] Triggering transitions on other elements

[clkz0r]

I have a DIV which has 2 images inside of it. Both the images are wrapped in a single a href tag. The first image is a solid image, it has a relative position. The second image is a transparent PNG that sits over the top of the solid image with absolute positioning. Both images have a lowered opacity.

Basically I want to be able to transition both images to full opacity on hover, but as the transparent png covers the solid image completely using :hover only triggers the transition for the top image, because I’m technically not hovering over the solid image below.

Is there any way this can be achieved?

Thanks in advance

[Paulie_D]

a img {
transition: opacity 1s;
}

a:hover img {
opacity: 1;
}

Would that work?

[clkz0r]

Ended up using :hover pseudo class of the parent a element

[designlaser]

This article might help you too, it covers a very similar example – Using Pseudo Hover Class

[Author]

Posts