title: CSS width transition expand image from right to left?
body: <p>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.</p>
  
  <p><a href="http://jsfiddle.net/ineomod/ZXq3s/" rel="nofollow">http://jsfiddle.net/ineomod/ZXq3s/</a></p>
  
  <p>The fiddle shows arrow-left being the wrong example and arrow-right being... right.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="arrow-left"&gt;
      &lt;div id="arrow-left_up"&gt;&lt;/div&gt;
      &lt;div id="arrow-left_over"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="arrow-right"&gt;
      &lt;div id="arrow-right_up"&gt;&lt;/div&gt;
      &lt;div id="arrow-right_over"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>