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/).
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?
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.
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:
If you want text to be added on hover, take a look at either of these past answers.