toggle

Distintos Efectos Hover Para Imágenes (2)

min Image Hover 2
Demostración Descargar Repositorio

—Versión actual 1.0.1

Nuevamente les comparto otro conjunto de 8 efectos hover para imágenes que diseñe hace poco. Si ya utilizas los efectos que compartí en la primera entrada puedes tambien usar estos sin ningun problema, ya que funcionan con la misma class ihover sin causar conflicto


Instalación

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


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

También 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-hover2.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: bounce, pulse, flipUp, flipDown, flipLeft, flipRight, rotateIn, rotateOut. Ejemplo:


<a class="ihover bounce" 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.