CODEWITHSUNDEEP
csscss-transitions
clkz0r
clkz0r

Reputation: 13

trigger css transition from a different element

I have a div which has 2 images inside of it. Both the images are wrapped in a single a 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 are the same size & 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?

Upvotes: 1

Views: 2259

Answers (1)

Boaz
Boaz

Reputation: 20230

Use the :hover pseudo class of the parent a element instead:

div a:hover img {opacity:1;}

This will apply the transition to both child img elements simultaneously.

Upvotes: 2

Related Questions