ShabbyAbby ShabbyAbby - 3 months ago 12
CSS Question

IMG hover not working

I have problem with my hover on img in my #picutre div. HTML:

<div id="picture">
<img class="content_pic" src="image/exemple.jpg" alt="exemple"/>
<img class="content_pic" src="image/exemple.jpg" alt="exemple"/>
</div>


And my CSS looks like this:

#picture {
text-align:center;
}

#picture img {
width:40%;
height:40%;
border:1px solid #000000;
display:inline-block;
margin-left:0;
margin-right:0;
opacity:0.4;
}

.content_pic:hover{
opacity:1.0;
}


So i'm wondering why it doesn't work. I'm using Google Chrome, checked IE10 too but not working there too.

Answer

#picture img is more specific than .content_pic:hover so opacity:0.4; will always overwrite opacity:1.0;.

Use #picture img:hover instead.

Comments