CSS: Transition Opacity On Mouse-out?


Answer :

You're applying transitions only to the :hover pseudo-class, and not to the element itself.



.item {   
height:200px;
width:200px;
background:red;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}


Demo: http://jsfiddle.net/7uR8z/6/



If you don't want the transition to affect the mouse-over event, but only mouse-out, you can turn transitions off for the :hover state :



.item:hover {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}


Demo: http://jsfiddle.net/7uR8z/3/



Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable