Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Efectos hover para imágenes CSS

Image Hover

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 fadeupbottomleftrightcirclecircle2circle3. 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.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas