title: Slowly open/close div?
body: <p>I have the following code that on mouseover opens/closes a div above an image.
  Is there a way to give it an effect? if so are there examples? I have searched for them but I am no js hero.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div class="under"&gt;&lt;img src="http://oi60.tinypic.com/244xp91.jpg" alt="test"&gt;&lt;/div&gt;
  &lt;div class="top"&gt;
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aurabitur ullamcorper ultricies nisi. Nam eget dui.
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      height: 400px;
      width: 600px;
  }
  
  div &gt; div {
      height: 70px;
      position: absolute;
  }
  
  .under {
      background: yellow;
      top: 0px;
  }
  
  .top {
      background: #008285;
      bottom: -50px;
      top: 330px;
  }
  
  .top:hover {
      background: #008285;
      bottom: 100px;
      height: 300px;
      top: 100px;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/2obp1hgL/" rel="nofollow">http://jsfiddle.net/2obp1hgL/</a></p>