hover over image unwraps a hidden div
<p>I have seen these on many sites. Basically, I'm creating a portfolio and I have a number of divs (squares in grid format) showing screenshots of my projects. I want to be able to hover over each project with my mouse which will in turn slide in a previously hidden div revealing specific information about that particular project.</p>

<p>Basically, I am looking for something simple like this: <a href="http://iamyuna.com/" rel="nofollow">http://iamyuna.com/</a></p>

<p>Notice if you hover over each shape (i.e. project), it quickly "unwraps" to reveal another image underneath. This may be a bad example since what I want is for the description to show up instead of another picture. However, I love how quickly it unwraps to show the hidden content.</p>

<p>Below is how my html is laid out. Would it be possible to implement something similar for my own work? If you guys can help me get started on this or suggest keywords to start with (I've been searching for a tutorial for hours but can't find one), I'd really appreciate it. Thank you.</p>

<pre><code>&lt;article class="project" data-id="248"&gt;
    &lt;div class="project-mask"&gt;
        &lt;div class="thumbnail"&gt;
             &lt;img src="image.jpg"&gt;
             &lt;div class="description"&gt;
                  &lt;h2&gt;Title&lt;/h2&gt;
                  &lt;p&gt;Description&lt;/p&gt;
             &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/article&gt;
</code></pre>
