Librería de efectos hover para imágenes

Los efectos hover mejoran la experiencia del usuario al poder interactuar con el sitio, sobre todo con las imágenes

Los efectos hover mejoran la experiencia del usuario al poder interactuar con el sitio, sobre todo con las imágenes. Anteriormente, había compartido en varios artículos distintos tipos de efectos, mismos que ya no están disponibles, ya que decidí fusionarlos en este proyecto, el cual es biblioteca CSS con efectos hover para imágenes, que iré ampliando con el tiempo.

El objetivo de esta librería es proporcionar una forma fácil y rápida de agregar efectos hover a las imágenes en un sitio web sin necesidad de escribir código. La biblioteca contendría una variedad de efectos, incluyendo animaciones más complejas.

Instalar

Agrega el archivo main.min.css antes de </head>, como es costumbre, si no puedes alojarlo puedes usar el archivo entregado por jsdelivr:

<link href="//cdn.jsdelivr.net/npm/@zkreations/imagehover@1/main.min.css" rel="stylesheet"/>

Nota: Estos estilos son “no críticos”, asi que es seguro diferir la carga de este archivo para obtener mayor rendimiento.

Modo de uso

Después de incluir la biblioteca en tu proyecto, solo tienes que usar la siguiente estructura HTML, reemplazando img-fade con el nombre del efecto deseado, que puedes copiar desde la página de demostración:

<figure class="img-fade">
  <img src="example.jpg">
  <figcaption>Text here</figcaption>
</figure>

También es necesario que reemplaces example.jpg por el enlace hacia tu imagen, y Text here por el texto deseado. Si necesitas apuntar la imagen a un enlace puedes probar con este codigo:

<figure class="img-fade">
  <a href="#tu-enlace">
    <img src="example.jpg">
    <figcaption>Text here</figcaption>
  </a>
</figure>

O puedes simplemente vincular el texto dentro de la etiqueta <figcaption>, sea cual sea el método que uses dependerá de tí, ya que esta librería solo se limita a los efectos.

Configurar en Sass

Instalas las dependencias del proyecto usando el comando npm i, luego ejecuta el siguiente comando en consola, lo que empezara a escuchar todos los cambios y compilará el código:

npm run start

Si alguno de los valores no son adecuados para ti, modifica los valores por defecto del archivo _variables.scss ubicado en ./scss/. También puedes agregar opciones nuevas si lo requieres.

También puedes personalizar el archivo main.scss, agregando solo los efectos que necesitas para tu proyecto, de esta manera al compilar tendrás un código mucho mas pequeño.

Observaciones

Para esta librería, se usaron todos los elementos ::before y ::after de sus hijos (sin enlaces). Tenlo en cuenta por si deseas implementar estos efectos con algún otro (como por ejemplo mi proyecto de tooltips), ya que no funcionara correctamente.

Conclusión

Comparte este artículo o califica con una estrella el repositorio si este proyecto te ha gustado, prometo agregar mas efectos con el tiempo. Muchas gracias por leer.