CSS Transition - two directions?

Question

Here is a crude example to help show what I would like: http://jsfiddle.net/GVaNv/

I was wondering if there is anyway to make the overlay transition in from the left, but to then leave from the right side.

So, on hover, the overlay comes in as it is in the example, but instead of retreating back to the left, to transitions to the right.

Is this possible? (doesn't necessarily need to use transition, I'm open to any way to do it).

Answer 1

Here is a simple solution that does not require more HTML or JavaScript:

.box {
    height: 100px;
    width: 250px;
    background: aqua;
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    color: white;
    padding: 10px;
    left: -270px;
    margin-left: 520px;
    bottom: 0;
    transition: left 300ms linear, margin-left 300ms ease-out;
}

.box:hover .overlay {
    left: 0;
    margin-left: 0;
    transition: left 300ms ease-out;
}

<div class="box">
    <div class="overlay">
        Overlay
    </div>
</div>

This leverages the margin for the animation. It works as follows:

1. The overlay resting state is set to the right of the element using a margin (while the left is positioned to the left of the element).
2. Upon hover, we set the margin to 0 without an animation. This allows the left animation to occur from the left side of the element.
3. Upon mouse-out, the margin is animated to go to its resting state on the right side of the element.