1

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?

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
1
  • Of Course! Silly oversight on my behalf! Many thanks, worked a treat!
    – clkz0r
    Commented Mar 7, 2013 at 0:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.