Question

I want to change the opacity on mouseover for each image separately using a CSS3 transition.

Here’s the code:

<div id="gallary">
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
</div>

and here’s the CSS:

#gallary img{
    opacity:1;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in;
}

#gallary:hover img{
    opacity:.5;
}

The selector occurs for all images inside a div with the id “gallary”. How can I make the opacity change for each image separately on mouseover?

Here’s a sample: http://jsfiddle.net/TJeHX/

Answer 1

#gallary:hover img {

->

#gallary img:hover {

You current definition changes opacity of whole “gallary” container and therefore, for all images.