trigger css transition from a different element

Question

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?

Boaz · Accepted Answer · 2013-03-07 00:35:54Z

2

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.

answered Mar 7, 2013 at 0:35

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

clkz0r Over a year ago

Of Course! Silly oversight on my behalf! Many thanks, worked a treat!

Collectives™ on Stack Overflow

trigger css transition from a different element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related