toggle

Distintos Efectos Hover Para Imágenes

min Image Hover
Demostración Descargar Repositorio

—Versión actual 1.0.4

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 en ninguna parte tambien puedes incluir directamente el contenido de image-hover.min.css con el resto del css de tu web.


Instalar en Blogger

Ve a edición html, busca ]]></b:skin> y debajo crea una nueva etiqueta de estilos de la siguiente forma:


<style>/*<![CDATA[*/

/*]]>*/</style>

Ahora abre el archivo image-hover.min.css, copia todo el contenido y pégalo dentro de las etiquetas que acabas de crear.


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.