Distintos Efectos Hover Para Imágenes (3)

min Image Hover 3

Demostración Descargar Repositorio

—Versión actual 1.0.0

Nuevamente les comparto 8 nuevos efectos para imágenes con la novedad de que ahora la lupa se genera en base64, por lo tanto no es necesario subir ninguna imagen. Si de casualidad ya utilizas los efectos que compartí en la primera entrada o la segunda puedes usar estos sin ningún problema, ademas funcionan con la misma class ihover.


Instalación

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


<link rel="stylesheet" href="image-hover3.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

Necesitas un contenedor y agregar la class ihover + el efecto, puedes elegir entre: gum, rippleOut, rippleIn, dborder, sliderUp, sliderDown, sliderLeft, sliderRight. Ejemplo:


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

Limitaciones

Cada imagen requiere un contenedor independiente, por lo tanto, no puede haber mas de una imagen por contenedor.