Tooltip/Content card example with animation

HTML

<div class="outer">
    <h1>Austin Pray</h1>
    <div class="inner">
        <p>This hover nonsense doesn't work on mobile very well. Rethink what you are doing.</p>
    </div>
</div>
<div class="outer">
    <h1>Austin Pray</h1>
    <div class="inner">
        <p>This hover nonsense doesn't work on mobile very well. Rethink what you are doing.</p>
    </div>
</div>
<p >
    Nisi diam adipiscing amet, hac lorem nunc sit cursus. Porttitor cursus in sociis phasellus, mauris, pellentesque ridiculus porta, turpis. Et magna nunc. Augue mauris, dictumst eu. Integer enim, purus augue? Aliquam et? Phasellus cras mauris! Proin aenean nisi nec cursus velit odio! Eros montes mid habitasse, rhoncus proin! Augue. Pellentesque magna tempor mid turpis, aenean ultricies, purus porttitor, ultrices aliquet augue urna magna. Ut? Vut nisi urna elit parturient magna, scelerisque magna sed magna risus! Odio amet lundium! Parturient augue, et porttitor, rhoncus sit. Pulvinar tincidunt sit ultrices parturient mus sit arcu dignissim ac habitasse ultrices. Et aenean sed pid diam eu elementum nec adipiscing, porta dapibus etiam tortor? Lectus turpis vel? Urna augue montes, dis tempor nisi in vut.

In sit, tristique, in duis. Nunc enim elementum ut ridiculus nisi? Nec ac porttitor pulvinar ut augue parturient tempor tincidunt cursus, odio turpis! Facilisis cum parturient eros nisi et, magna nunc, sit tincidunt sit diam vel et mauris montes quis lundium ultrices pulvinar duis mus sit natoque! Tortor integer ridiculus, mauris nec adipiscing habitasse magna lorem ac. Augue odio, pulvinar risus a aliquet elementum scelerisque porta? Eu dis nisi dictumst! Sed, est ac egestas magnis auctor nunc et augue dignissim tincidunt scelerisque! Vel augue ut sed nunc, a elementum integer scelerisque porta aliquet urna mus in magna mattis integer! Elit proin nunc odio! Pellentesque odio lundium est? Augue nec odio augue? Turpis. Sed mus lorem diam cum, urna ultricies.

Ac. Sociis lundium adipiscing?...

CSS

.outer {
    position:relative;
    background:#3498db;
    width:30em;
    height:4em;
}
.inner {
    position:absolute;
    overflow:hidden;
    top:4em;
    height:0;
    background:#3498db;
}
.outer:hover .inner {
    display:block;    
    height:5em; background:#009822;
}
/* optional animation silliness */
.inner {
    -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000) 0.5s; 
   -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000) 0.5s; 
    -ms-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000) 0.5s; 
     -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000) 0.5s; 
        transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000) 0.5s; /* ease-in-out */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}