Librerías CSS para aplicar efectos hover a imágenes y otros elementos

Que tus usuarios sepan qué elementos de tu sitio se pueden seleccionar o se enlazan a otra pantalla (ya sea una página del sitio que se encuentra en el menú o un formulario para completar datos) es parte esencial de una buena interfaz de usuario. En ciertos casos, es bastante sencillo ofrecer pistas al respecto, por ejemplo, los botones y el menú, el usuario ya los reconoce y sabe que en todo sitio web se pueden seleccionar.

También es común que las galerías de imágenes tengan vistas en miniatura y cada una de ellas es un elemento que se puede seleccionar. Estas imágenes, al igual que los botones y el menú, posee diversos estados y uno de ellos es “hover” que hace referencia al momento en que el cursor se posa sobre cierto elemento, pero todavía no se hace clic. A diferencia de los botones, los efectos hover en imágenes no sólo realizan un cambio de color, sino que ofrecen efectos de rotación, zoom, cortina, desvanecimiento, desenfoque, etc. En este artículo te listamos algunas librerías CSS que puedes usar al aplicar efectos hover a las imágenes de tu sitio:

Image Hover Effects

Image Hover Effects es un conjunto de 16 efectos hover para imágenes que incluyen leyendas. Todos ellos pueden funcionar con Boostrap, pero no es necesario que hagas uso de esta framework para poder usar alguno de estos efectos.

Hover.css

Hover.css es un conjunto de efectos hover en CSS3 que puede ser aplicado a botones, logos e imágenes de manera sencilla. Puedes aplicar el efecto deseados simplemente copiando y pegando el código CSS respectivo en el archivo o puedes usarlo como referencia para crear tu hoja de estilos desde cero.

Incluye efectos de transición en 2D para fondos, bordes y también efectos de transición para sombras y brillos. Toda esta librería se encuentra disponible en CSS, Sass y LESS.

Imagehover.css

Imagehover.css es una gran librería con más de 40 efectos variados como desvanecimiento, rotación, zoom, desenfoque, etc. A pesar de la gran cantidad de efectos que posee, es una librería ligera que tiene un peso de 19 KB (comprimida).

Image Caption Hover Animation

Image Caption Hover Animation es otra pequeña librería que contiene 4 efectos hover para imágenes. Todos los efectos han sido creados usando transiciones y transformaciones en CSS3, no se ha hecho uso de JavaScript en ningún momento para optimizar la compatibilidad en diversos navegadores.

iHover

iHover es una colección de efectos hover realizados en CSS3 que se encuentran divididos en “círculos” y “cuadrados”. Esta denominación tiene que ver con la forma de las imágenes que se van a emplear en los efectos hover. Para poder usar este galería deberás tener el código HTML e incluir los archivos CSS respectivos.

CSS3 Based Hover Caption Effects Incontent

Esta página de ejemplos contiene una gran variedad de transiciones y efectos para hover, en todos ellos aparece sobre la imagen una capa de color en baja opacidad donde no sólo se puede apreciar el título de la fotografía o imagen, sino también un pequeño texto o leyenda. Esta nueva capa aparece en diversos efectos animados: de izquierda a derecha y viceversa, rotación, hacia arriba o hacia abajo, etc.

CSS Hover Effect

Aunque esta página contiene sólo un par de efectos, vale la pena revisarlos ya que son bastante variados, desde el ya típico efecto de cortina o capa en opacidad hasta otros efectos menos usuales, como la aparición de detalles en tarjetas que, por supuesto, se activan sólo cuando el cursor se posa sobre la imagen respectiva.

CSS3 Transition Effect on Hover

Este efecto es bastante peculiar y posee una animación bastante fluida. En cuanto el cursor se posa sobre la imagen, ésta se aleja y deja espacio para que el cuadro de texto se agrande. Ayuda mucho el hecho de que los cuadros de texto sean bastante coloridos.

CSS Tooltip Hover Buttons

CSS Tooltip Hover Buttons, como su nombre indica es un efecto CSS desarrollado para botones en donde aparece un globo de anotación cada vez que el cursor se posa sobre algún botón. Es ideal para añadir descripciones cortas en cada globo.

Sexy Image Hover Effects

Sexy Image Hover Effects es un conjunto de 6 efectos hover para imágenes. Las imágenes en la galería se pueden visualizar, pero hay una capa gris en opacidad que las cubre, de modo que no se pueden ver los colores reales hasta que son seleccionadas. Pero no sólo podemos ver el color original, sino que también se puede apreciar la imagen en mayor tamaño, de esta manera, la atención se enfoca en la imagen seleccionada.

3D Hover Effect for Thumbnails and Images

Este genial efecto transforma la imagen en un caja 3D cuando se encuentra en reposo. Se hace uso de sombras y se emplea la perspectiva para dar la sensación de un efecto 3D.

Magnifying Glass for Image Zoom

Este efecto hover es ideal para tiendas online pues permite hacer zoom a zonas específicas de una imagen o fotografía. Este efecto se logra de forma bastante interactiva pues hay una lupa que podemos mover por la imagen.

Hace uso de las propiedades de radio de borde y sombra de CSS3.

Beautiful CSS3 Hover Effect

Este efecto hover para imágenes es dinámico pues el título de cada fotografía rota rápidamente y permite ver la imagen en cuestión. Es un efecto bastante sencillo, pero efectivo.

Simple Hover Effects with CSS

Simple Hover Effects with CSS es un conjunto de 9 efectos hover ideales para tus galerías de imágenes, sin embargo, el efecto aplicado a la fotografía se puede apreciar antes de colocar el cursor sobre la imagen. Al realizar esta acción, la imagen vuelve a sus colores originales.

Todos estos efectos se han realizado usando filtros en CSS3.

En conclusión…

Aunque los efectos de tipo hover son más notorios en fotografías y otro tipo de imágenes, también se pueden encontrar en botones y otros elementos que forman parte de un sitio web. En el caso de las imágenes, no sólo sirve para informar que dicha imagen ha sido seleccionada, sino que también puede mostrar información adicional o tener un enlace a otra página mediante un botón, de modo que hay otras opciones disponibles cuando un visitante decide seleccionar alguna imagen en tu sitio. Con estos efectos sencillos se puede dar un poco de interactividad a tu sitio y al mismo tiempo captar la atención de tus usuarios y ofrecerles información adicional.