Show/Hide div on mouse hover in Jquery

First add the below HTML code to your page which contains two div tags. One is the main tag and the other one is the overlay tag.

<div id="divTest">
<div id="overlay1" class="overlay">
I'm Hover 1
</div>
Mouse Over me.
</div>

Then we need to hide the overlay tag on page load. Add below code between page header tags

<style type="text/css">
.overlay
{
  display:none;
}
</style>

Now add below Jquery script.

<script src="jquery-1.8.3.js" type="text/javascript"></script>

<script type="text/javascript">
     $(document).ready(function () {
                  $('#divTest').hover(function () {
                      $('#overlay1').animate({ height: '30px', opacity: 'show' }, 300);
                  },
                  function () {
                      $('#overlay1').animate({ height: '0', opacity: 'hide' }, 300);

                  });

     });
 </script>