CSS width transition expand image from right to left?

Question

I want to make this arrow button that, when hovered, 'fills in' with a different coloured arrow from right to left. But currently I can only get the image to 'fly in' from the right, or rather it's actually expanding from the left side of the image but aligned to the right of the container.

http://jsfiddle.net/ineomod/ZXq3s/

The fiddle shows arrow-left being the wrong example and arrow-right being... right.

HTML:

<div id="arrow-left">
    <div id="arrow-left_up"></div>
    <div id="arrow-left_over"></div>
</div>
<div id="arrow-right">
    <div id="arrow-right_up"></div>
    <div id="arrow-right_over"></div>
</div>

CSS:

#arrow-left {
    width: 96px;
    height:96px;
    position: relative;
    float:left;
    }
#arrow-left_up {
    background:url('http://placekitten.com/g/100/100');
    width:96px;
    height:96px;
    position: absolute;
}
#arrow-left_over {
    background:url('http://placekitten.com/100/100');
    width:0px;
    height:96px;
    position: absolute;
    right: 0px;
    top:0px;
    -webkit-transition: all 0.2s ease-out; 
       -moz-transition: all 0.2s ease-out; 
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}
#arrow-left:hover #arrow-left_over {
width: 96px;
-webkit-transition: all 0.2s ease-out; 
   -moz-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
        transition: all 0.2s ease-out;
}


#arrow-right {
    width: 96px;
    height:96px;
    position: relative;
    float:left;
}
#arrow-right_up {
    background:url('http://placekitten.com/g/100/100');
    width:96px;
    height:96px;
    position: absolute;
}
#arrow-right_over {
    background:url('http://placekitten.com/100/100');
    width:0px;
    height:96px;
    position: absolute;
    left: 0px;
    top:0px;
    -webkit-transition: all 0.2s ease-out; 
       -moz-transition: all 0.2s ease-out; 
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}
#arrow-right:hover #arrow-right_over {
    width: 96px;
    -webkit-transition: all 0.2s ease-out; 
       -moz-transition: all 0.2s ease-out; 
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}

Answer 1

Well what I did was to make the over visible all the time width: 96px; but put it under the up with z-index: -1;. Then when you hover, then up will "slide" to the left until it's hidden, and the over will appear.

http://jsfiddle.net/27dJZ/

#arrow-left_up {
    background:url('http://placekitten.com/g/100/100');
    width:96px;
    height:96px;
    position: absolute;

    -webkit-transition: all 0.2s ease-out; 
       -moz-transition: all 0.2s ease-out; 
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}
#arrow-left_over {
    background:url('http://placekitten.com/100/100');
    width:96px;
    height:96px;
    position: absolute;
    right: 0px;
    top:0px;
    z-index: -1;
}
#arrow-left:hover #arrow-left_up {
    width: 0px;
    -webkit-transition: all 0.2s ease-out; 
       -moz-transition: all 0.2s ease-out; 
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}