How do I add a js/jquery animation to pull down a div on hover?

Observe before hover and after hover. Instead of instantly switching, I want to create the effect that the header is being pulled down and expanded. So basically, I want the new div to appear from the top down. The html structure is as follows:

<a href="#" id='featured-article'>
        <img src="img/iraq-war.jpg" class='fluid'>
        <h1 class='center-text'>Featured Article: The War In Iraq</h1>
        <div class="mouse-over">
             <p>The Iraq War was controversial at the time blah blah blah</p>
        </div>
</a>

Is there a handy way to do this with jquery? Perhaps a library or something? Or worst comes to worst, I'd like to see the raw js. Or other suggestions. Thanks