 <p>Here is a pure CSS solution I quickly hacked up: <a href="http://codepen.io/nikrich/pen/yeQYGE" rel="nofollow">CSS Hover Effect</a></p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>h1, h2, h3, h4, h5{ margin:0px; } .tile{ overflow: hidden; width: 400px; height:350px; } .tile:hover &gt; .body{ transition: all 0.5s ease; top: -3em; } .body{ transition: all 0.5s ease; background-color: #333; margin:0px; color: #fafafa; padding: 1em; position:relative; top: -1em; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tile"&gt; &lt;img src="http://lorempixel.com/400/300"&gt; &lt;div class="body"&gt; &lt;h2&gt;Test Header&lt;/h2&gt; &lt;p&gt;Info to display&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>Basically, I just change the position of the text div when I hover over the main div and add a transition animation to it.</p>