Efecto de Sobreposición con CSS

Que tal queridos lectores, teníamos tiempo sin hacer un tutorial y debemos recompensarlos por este daño que hemos causado, por eso es que esta entrada no será un tutorial.. nahh si será, calma calma ;). ¿Se fijan en la imagen del juego para Android Squarebot que se encuentra en la barra derecha del blog? Si pasas el ratón sobre ella, verán el efecto que te traemos en esta ocasión.

Como tal, el efecto se hace de forma sencilla con el siguiente código:

<style type="text/css">
.view {
width: 150px;
height: 150px;
margin: 6px;
border: 2px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0 0 5px #666;
cursor: default;
}
.view .mask, .view .content {
width: 150px;
height: 150px;
position: absolute;
overflow: hidden;
background: #e5e5e5;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 14px;
padding: 5px;
background: #d1127e;
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 5px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 3px;
background: #d1127e;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #d1127e;
}
.view a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(229,229,229, 0.8);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
</style>
<center>
<div class="view view-first">
<img src="ENLACE_IMAGEN" height="150" width="150" />
<div class="mask">
<h2>Squarebot</h2>
<p></p>
<a href="ENLACE_DESCARGA" class="info">¡Descargalo ya!</a>
</div>
</div>
</center>

Como puedes ver, es bastante sencillo y no requiere de mucho esfuerzo. Si la imagen que van a colocar es de otro tamaño comparada con la del ejemplo, deben modificar las lineas que están de color rojo. Recuerda modificar la frase ENLACE_IMAGEN por la URL de tu imagen y la frase ENLACE_DESCARGA por la URL de tu descarga.

¡Nos leemos!