title: CSS expand width from right to left
body: <p>I need to build an effect like jQuery's accordion. I have 10 items that fill the screen; when the mouse hovers over an item, it expands in width. How I can make it expand from right to left for the last 5 items?</p>
  
  <p>My HTML :</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div style="width: 165.25px; background: rgb(228, 228, 230);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 165.25px; background: rgb(35, 123, 192);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 165.25px; background: rgb(20, 4, 4);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 165.25px; background: rgb(182, 159, 36);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 165.25px; background: rgb(162, 169, 180);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 161px; background: rgb(37, 29, 4);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 161px; background: red;" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 161px; background: rgb(88, 45, 45);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 161px; background: rgb(202, 41, 176);" class="item"&gt;&lt;/div&gt;
      &lt;div style="width: 161px; background: rgb(24, 207, 185);" class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my css:</p>
  
  <pre><code>.wrap{
      width:100%;
      float:left;
      height: 300px;
      overflow: hidden;
  }
  
  .item {
      float:left;
      height: 100%;
      display: block;
  }
  </code></pre>
  
  <p>jQuery code:</p>
  
  <pre><code>$('.item').each(function(e){
      $(this).css('width', ($(this).parent().width()/10));
  });
  
  $('.item').on('mouseenter', function(event) {
      $(this).stop().animate({width: "50%"}, {duration: 500});
  }).on('mouseleave', function(event) {
      $(this).stop().animate({width: ($(this).parent().width()/10)}, {duration: 500});
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/thanhlk/fydhbsbe/3/" rel="nofollow">jsFiddle link</a></p>
  
  <p>Thanks.</p>