CODEWITHSUNDEEP
css
thecommonthread
thecommonthread

Reputation: 405

CSS, img hover inside <a> tag affecting next img's opacity

<a href="#">
    <img src="images/states/oregon.png" name="oregon" width="115" height="98" class="state" id="oregon" />
</a>
<img src="images/states/plates/oregon.png" name="oregon_plate" width="109" height="59" class="license_plate" id="oregon_plate" />

On hover of the first image in the <a> tag, I need the second image's opacity to increase using CSS. I have tried using the +and ~ operators and couldn't get this to work. Any help would be appreciated.

Upvotes: 2

Views: 1485

Answers (2)

Evan Mulawski
Evan Mulawski

Reputation: 55334

a:hover + img {
    opacity: 0.5;
}

The second img is a sibling of the a, so + will do the job.

JSFiddle

Upvotes: 5

zkanoca
zkanoca

Reputation: 9918

a + #oregon_plate
{
    transition: opacity .5s ease-out; /*opacity decreases smoothly*/
}
a:hover + #oregon_plate {
    opacity: 0.5;
}

There is a fiddle for you here

http://jsfiddle.net/u6rKy/

Upvotes: 2

Related Questions