title: Hover on div without moving other div
body: <p>I have 12 div :</p>
  
  <pre><code>&lt;div class="worktop_central"&gt;
     &lt;div class="row"&gt;
          &lt;div&gt;1&lt;/div&gt;
          &lt;div&gt;2&lt;/div&gt;
          &lt;div&gt;3&lt;/div&gt;
          &lt;div&gt;4&lt;/div&gt;
          &lt;div&gt;5&lt;/div&gt;
          &lt;div&gt;6&lt;/div&gt;
          &lt;div&gt;7&lt;/div&gt;
          &lt;div&gt;8&lt;/div&gt;
          &lt;div&gt;9&lt;/div&gt;
          &lt;div&gt;10&lt;/div&gt;
          &lt;div&gt;11&lt;/div&gt;
          &lt;div&gt;12&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this css :</p>
  
  <pre><code>.worktop_central{
      position:relative; 
      margin-bottom: 30px;
  }
  
  .worktop_central .row{
    text-align: justify;
    font-size: 0;
    font-size: 12px\9; /* IE6-9 only hack */
  }
  
  .worktop_central .row div{
    border:1px solid #bfbfbf;
    display: inline-block;
    font-size: 12px;
    width: 216px;
    zoom: 1;
    *display: inline;
    min-height: 200px;
    margin-top:20px;
    transition: 1s ease-in-out;
  }
  
  .worktop_central .row div:hover{
      height: 600px;
  }
  
  .worktop_central .row:after{
    content: "";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
  }
  </code></pre>
  
  <p>For example, on Mouseover of div "1", i would like that the div "5" and "9" down only and not 5, 6, 7, ... like on this example <a href="http://jsfiddle.net/ARNcs/" rel="nofollow">http://jsfiddle.net/ARNcs/</a>.</p>
  
  <p>Anyone have an idea how i can do that ?</p>