Animation partially works, but not completely

Question

At the moment, I have this one , a small DIV that slides on top from the middle of the DIV container when the mouse hangs over the DIV container; but when you mouse out, it goes back to where it came from. What I would like to do is make a DIV slide on the other side of the DIV, directly opposite to where it entered.

Can I use only CSS? (I believe that with jQuery this would be more straight forward)

<div class="blocks"> <div class="blocks_title"> </div> </div> <div class="blocks"> <div class="blocks_title"> </div> </div> .blocks { position: relative; float: left; margin: 20px; width: 100px; height: 100px; border: 1px dotted #333; overflow: hidden; } .blocks_title { position: relative; width: 20px; height: 20px; top: 0px; left: 40px; background: #333; opacity: 0; -webkit-transition: all .25s; -moz-transition: all .25s; transition: all .25s; } .blocks:hover .blocks_title { top: 40px; opacity: 1; } 

Answer 1

And only when everyone is convinced that he will not work only with css:

http://jsfiddle.net/Xkee9/36/

I used the animation for the center of the mouse and the transition for the mouse

Edit: firefox fix added

Edit: Explanation:
(I always use -webkit- -prefixes, just to explain it in Chrome and Safari, Firefox uses -moz- -prefix, opera -o-prefix)

When nothing happens:
the block is at the bottom of div.blocks ( top:80px; ), with opacity 0, there is also no animation running

When freezing:
the block moves instantly at the top without a transition (see -webkit-transition: none; ), because then the down-1 animation is performed. This animation moves the block from top:0 to top:40px; at .25s. After the animation, the block remains at top:40px; because this is what I added to .blocks:hover .blocks_title .

When mousleaving:
there is no more animation, but the block moves from top:40px to top:80px; in .25s due to -webkit-transition: all .25s;