CSS Transition - eases in but doesn’t ease out?

I have a wee problem concerning my images, as shown here ( http://jsfiddle.net/garethweaver/Y4Buy/1/).

.img-blur:hover {
  -webkit-filter: blur(4px);
  transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
}
<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

The image blurs when the mouse hovers but when I take my mouse off it goes straight back to normal, how can I make it ease out of the blur?

Also, is there a way to show text when the mouse hovers over? When the user hovers over the image I want it to blur and then show some text such as “Learn More”. Is this also possible with just css?

Cheers


solution

Add the transition properties to the element itself rather than the :hover pseudo-class version.

In doing so, the transition will take place when hovering on and off.

Updated Example

.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur" />

If you want different transition properties when hovering on/off, see this example.

-

The transition property on the element itself will take place when hovering off of the element.

-

The transition on the :hover pseudo class will take place when hovering on the element:

.img-blur {
  transition: all 0.35s ease-in-out; /* Hover off */
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
  transition: all 1s ease-in; /* On hover */
}
<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

If you want text to be added on hover, take a look at either of these past answers.

-

http://stackoverflow.com/a/18322705/2680216

-

http://stackoverflow.com/a/21371665/2680216