Alessio Atzeni, un diseñador italiano (su nombre hace casi innecesaria la aclaración), creó un simple pero potente tutorial explicando paso a paso como implementar las transiciones CSS3 aplicadas al efecto hover en imágenes. El tutorial contempla cinco ejemplos distintos, aplicando a cada uno de ellos un efecto distinto.
En general la estructura para generar estas transiciones es igual en todos los ejemplos, consta de un div contenedor de la imagen, la imagen en sí, una clase que auspicia de mascara, y finalmente el contenido mostrando la descripción o bien en enlace a la imagen de mayor tamaño.
El ejemplo que más me gusto, y que por eso capture en una imagen, es uno que muestra un pequeño triángulo, y que indica el botón para visualizar la imagen en su tamaño original. Este triángulo se desplaza al centro de la imagen de manera automática al posicionar el puntero del ratón sobre la imagen. Todo utilizando las transiciones de CSS3.
Alessio pone a nuestra disposición los ejemplos online para que podamos probarlos de forma directa. Al ser código HTML y CSS3 podemos investigar el código visualizando el fuente de la pagina.
Para ilustrar un poco lo sencillo que resulta crear animaciones con CSS, colocó a continuación el ejemplo que realizo Alessio para generar el efecto de la captura.
Estructura HTML:
<div class="view effect">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>
CSS:
.effect img {
opacity:1;
transform:scale(1,1);
transition: all 0.2s ease-in;
}
.effect .mask {
opacity:0;
overflow:visible;
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:150px;
width:0;
height:0;
transform:translateY(-125px);
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
opacity:0;
transform:translateY(-125px);
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect:hover img {
opacity:0.7;
transform:scale(2,2);
}
.effect:hover .mask {
opacity: 1;
transform: translateY(0px);
}
.effect:hover a.info {
opacity:1;
transform:translateY(100px);
}
Les recomiendo visitar la web del autor de este fantástico tutorial, en donde se explica paso a paso como funcionan las distintas transiciones.
Web: Alessio Atzeni
