title: expand div height onmouseover
body: <p>I need height on the div 50px in default and it has to be changed to 300px onmouseover. I coded in below manner to implement it.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #div1{
  height:50px;
  overflow:hidden;
  }
  #div1:hover{
  height:300px;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div id="div1"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This code is working fine but as per CSS property on hover its immediately changing its height. Now, I need a stylish way like slowly expanding div onmouseover and contracting onmoveout. How to expand and contract div on hover?</p>