title: move div with CSS transition
body: <p>I am using following code to display a hidden div on hover. I'm using the CSS <code>transition</code> property for to fade in the hidden div. Is it possible to slide in the hidden (for example from left to right) div instead of fading in using the CSS only?
  Here's my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;a href="#"&gt;&lt;img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"&gt;&lt;/a&gt;
      &lt;div class="hidden"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.box{
      position: relative;    
  }
  
  .box .hidden{    
     background: yellow;
      height: 300px;    
      position: absolute;
      top: 0;
      left: 0;    
      width: 500px;
      opacity: 0;    
      transition: all 1s ease;
  }
  
  .box:hover .hidden{
      opacity: 1;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/u2FKM/" rel="noreferrer">http://jsfiddle.net/u2FKM/</a></p>