Efectos hover para imágenes

Demostración Descargar

Image Hover es un conjunto de efectos para imágenes que se ejecutan al pasar el mouse por encima. A diferencia de la versión anterior que se encontraba disponible en la antigua versión de zkreations, estas no requieren estar siempre en una lista, y ademas el html es mínimo, basta solo con encerrar la imagen en algún contenedor y agregar la class ihover.

Instalación

Descargar el archivo adjunto en esta entrada e incluir image-hover.min.css arriba de </head> de la siguiente forma:

<link rel="stylesheet" href="image-hover.min.css"/>

Si no puedes alojar el archivo css incluye directamente el contenido de image-hover.min.css con el resto del css de tu web.

Instalar en Blogger

Abre el archivo image-hover.min.css y copia todo el contenido. Ahora ve a edición html, busca ]]></b:skin> y arriba de eso pega el código copiado con anterioridad.

Uso básico

Crear un contenedor y agregar la class ihover + el efecto que necesites, puedes elegir entre fade, up, bottom, left, right, circle, circle2, circle3. Ejemplo:

<a class="ihover fade" href="#pageUrl"><img src="img/img-01.jpg"/></a>

Limitaciones

No puedes agregar un grupo de imágenes dentro de un contenedor, cada imagen requiere un contenedor independiente.