CSS: transition opacity on mouse-out?

css, css-transitions

Solution

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: https://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: https://jsfiddle.net/7uR8z/3/

Problem

``` .item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } ``` Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse? Demo here: https://jsfiddle.net/7uR8z/ ​

Original source