Efectos hover para imágenes

8:30:00

Estos efectos hover funcionan al momento de pasar el mouse por encima de la imagen. son efectos hechos con puro CSS3 y hacemos uso de la clase transform y transition para crear estos efectos con un toque animado.

Instalación

El siguiente código css debes incluirlo entre tus estilos, por ejemplo en Wordpress los puedes incluir en el archivo style.css al final de todo el documento, claro sin las etiquetas html <style></style>. En el caso de Blogger busca </head> y arriba de eso pega los estilos:

<!-- Efectos Hover -->
<style type='text/css'>/*<![CDATA[*/

/* Effect animated in CSS for image
Created by GianCreativo
URL: http://giancreativo.blogspot.com/
*/
.ahover img{-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s}.glow img:hover{-webkit-transform:scale(1.1) translateZ(0);transform:scale(1.1) translateZ(0)}.shrink img:hover{-webkit-transform:scale(.9) translateZ(0);transform:scale(.9) translateZ(0)}.rotate img:hover{-webkit-transform:rotate(10deg) translateZ(0);transform:rotate(10deg) translateZ(0)}.traslacion img:hover{-webkit-transform:translate(10px,20px) translateZ(0);transform:translate(10px,20px) translateZ(0)}.skewX img:hover{-webkit-transform:skewX(10deg) translateZ(0);transform:skewX(10deg) translateZ(0)}.skewY img:hover{-webkit-transform:skewY(10deg) translateZ(0);transform:skewY(10deg) translateZ(0)}.gian-left img:hover{-webkit-transform:rotate(10deg) translateZ(0) scale(1.1) translateZ(0);transform:rotate(10deg) translateZ(0) scale(1.1) translateZ(0)}.gian-right img:hover{-webkit-transform:rotate(-10deg) translateZ(0) scale(1.1) translateZ(0);transform:rotate(-10deg) translateZ(0) scale(1.1) translateZ(0)}
/*]]>*/</style>

Uso básico

Para empezar necesitamos crear un contenedor y agregar la class ahover + el efecto que necesites, puedes elegir entre glow, shrink, rotate, traslacion, skewX, skewY, gian-left, gian-right. Ejemplo:


<a class="ahover glow" href="#url"><img src='#Imagen'/></a>

Limitaciones

Es importante que cada imagen tengo un contenedor independiente, no podemos agregar varias imágenes en un solo contenedor.

Gian Franco