Tutorial Firma con hover

<div class="firmaBonita"><div class="hoverFirma"></div></div>
<style>.firmaBonita{width:300px; height:150px; margin:20px auto; background:#fafafa; outline:1px solid #eee; outline-offset:2px; overflow:hidden; background:url(https://placehold.jp/300x150.png);} .hoverFirma{width:300px; height:150px; background:#ff6699; webkit-transition: 1s;-o-transition:1s;transition: 1s; position:relative; top:300px;} .firmaBonita:hover .hoverFirma{webkit-transition: 1s;-o-transition:1s;transition: 1s; top:0px;}</style>