title: How to add a transition to a absolute positioned box on hover
body: <p>Hi I have created boxes with <code>overflow: hidden</code>, now on <code>hover</code> I would like for the box to drop down showing inner box.</p>
  
  <p>I have created this and it works fine however I would like to use a transition on this effect to smoothen the drop down. I have added the transition and it is not working. </p>
  
  <p>Any advice would be great on this thank you.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  #items {width:300px;}
  .item {width:100px;border:solid 1px #ccc;float:left;height:20px;
   z-index:0;overflow:hidden;position:relative;}
  
  .item:hover{overflow:visible;z-index:100;}
  .item:hover .inner{z-index: 100;}
  .inner{position: absolute;
   background: white;
  width: 100%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="items"&gt;
  
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 1&lt;br&gt;text 1&lt;br&gt;text 1&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 2&lt;br&gt;text 2&lt;br&gt;text 2&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 3&lt;br&gt;text 3&lt;br&gt;text 3&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 4&lt;br&gt;text 4&lt;br&gt;text 4&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 5&lt;br&gt;text 5&lt;br&gt;text 5&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 6&lt;br&gt;text 6&lt;br&gt;text 6&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 7&lt;br&gt;text 7&lt;br&gt;text 7&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 8&lt;br&gt;text 8&lt;br&gt;text 8&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 9&lt;br&gt;text 9&lt;br&gt;text 9&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;div class="inner"&gt;text 10&lt;br&gt;text 10&lt;br&gt;text 10&lt;/div&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>