Question

At the moment I have this, a small DIV that slides in from the top to the center of a container DIV when the mouse hovers over the container DIV; but on mouseout, it slides back out to where it came from. What I’d like to do is have the DIV slide out of the other side of the DIV, directly opposite where it entered.

Is this possible using just CSS? (I imagine with JQuery it would be more straightforward)

<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 just when everyone is convinced that it’s not gonna work with css only:

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

I used an animation for the mouseenter and a transiton for the mouseleave

Edit: added firefox fix

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

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

When hovering:
the block moves instantaneous to the top with no transition (see:-webkit-transition: none;), because then the animation down-1 is running. That animation moves the block from top:0 to top:40px; in .25s. After the animation, the block stays at top:40px; because that’s what I added in .blocks:hover .blocks_title.

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