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.
#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;
}