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; }

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

回答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); }

---

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 */ }

---

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

文章来源: CSS Transition - eases in but doesn't ease out?