Caption on hover with css3

On hover caption with pure css3 animation. Use the following css and html code.

.overlay { width:100%; height:100%; position:absolute; left:0; top:0;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear; opacity:0; background:#000; cursor:pointer; color:#FFF }
.box { width:200px; height:250px; float: left; position:relative; background:#060}
.overlay:hover { opacity:1}

<div class="box">
<div class="overlay">
<h1>Test</h1>
<p>testtesttesttest</p>
</div>
</div>