IMG hover not working

Question

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 1

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

Use #picture img:hover instead.

Answer 2

You have given the picture img opacity 0.4 and hover effect for .content_pic:hover so this vl not work.

see the fiddle here http://jsfiddle.net/4z55sjn0/2/