CSS3 Animate Out of :hover

Question

I\'m setting up a simple animation that brings up a little additional information when you hover over an image. The jQuery backup part is written and works fine, though the issu

Answer 1

I believe if you add the animation to the non-hover state, you can get them to transition back. See my super-simple example here.

Answer 2

You don't need keyframes for something as simple as this.

I made you a demo (with only -webkit vender prefixes to keep things simple).

Answer 3

This can also be done with CSS transitions, it's less powerful but simpler. The idea is to have a div containing the top and bottom links but it is bigger than the wrapper div so that parts are hidden. When you hover over it, it reduces height so the links are visible. To make it animate back and forth you add the "transition : height 1s" to the css of the div. If I'll have the time later, I'll try to write it.