How can i change css transitions for different actions? - css

Question

i have this code
http://jsfiddle.net/d2QwG/
When user hover on image after 1 sec the others change opacity:0.4.
But when the user goes to another image i want all the images to return to opacity:1and if he again hover over a sec the others to change opacity:0.4.
I understand that the rule
#tiles li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
makes the problem but i want to keep this rule for another transition that i make when some <li> items are moving.
I want the visual result like i didnt have the above CSS rule but without deleting it.
I dont mind using javascipt,jquery.
EDIT:
I want this result:
http://jsfiddle.net/KJ8T4/
but i want also to have this CSS rule
#tiles li {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

Answer 1

Pure CSS solution:
LIVE DEMO
#tiles{
margin:0;
list-style:none;
display:table;
border-collapse:collapse;
}
#tiles li {
vertical-align:middle;
display:table-cell;
padding:5px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tiles li img{
vertical-align:middle;
}
#tiles:hover li{
opacity: 0.4;
}
#tiles li:hover{
opacity: 1;
}

Answer 2

You could to use JavaScript or jQuery for that.
Here's a Fiddle.
$('li').on("mouseout", function() {
$('img').css('opacity', '1');
});