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

Question

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

相关标签:

Answer 1

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.

• https://stackoverflow.com/a/18322705/2680216

• https://stackoverflow.com/a/21371665/2680216