Hacer saber a los usuarios claramente en qué partes de la página se puede hacer clic es una parte importante de la usabilidad web. El método más extendido para ello es cambiar el color del texto y subrayarlo. Hoy en día, con CSS, hay un montón de maneras de mostrar efectos hover, particularmente en las imágenes.
Ahora los desarrolladores pueden añadir efectos de transición o animados cuando los usuarios posan el ratón encima de un elemento. En este artículos veremos slides direccionales, zooms a diferentes velocidades, fade ins y fade outs, efectos de visagra, wobbles, bounces y mucho más...
En esta compilación, te mostramos más de 250 efectos para el hover que pueden inspirarte.
Image Hover Effects (16 efectos)
En esta página encontrarás una bonita colección de 16 efectos hover para imágenes con leyendas. Cópiate el código HTML y CSS de cada efecto posando el ratón encima de la imagen y haciendo clic en Show Code.
Image Caption Hover Animation (4 efectos)
Aquí tienes 4 animaciones para imágenes con leyendas que se ejecutan cuando el usuario posa el ratón encima de la imagen. Los efectos están desarrollados con transiciones de CSS y transform, sin nada de Javascript, para incrementar la compatibilidad entre los distintos navegadores.
iHover (35 efectos)
iHover es una colección de efectos hover potenciados por CSS3 Hay 20 efectos hover circulares y 15 efectos hover cuadrados. Para usar dichos efectos, necesitarás escribir algo de HTML e incluir los ficheros CSS.
Image Hover (44 efectos)
Esta librería contiene 44 efectos hechos con CSS puro. Muchos de los efectos incluyen fades, pushes, slides, hinges, reveals, zooms, blurs, flips, folds y shutters, en múltiples direcciones. Hay una versión extendida de 216 efectos la cual puedes adquirir por 14 euros.
Hover Effect Ideas (30 efectos)
Esta librería está enfocada en efectos hover entre imágenes y sus leyendas. Es decir, al posar el ratón encima de una imagen, aparecerá la leyenda de dicha imagen de una manera muy chula y super currada. Cuenta con un total de 30 efectos en dos sets con tutoriales y con posibilidad de ver el código fuente.
Hover CSS (108 efectos)
Con Hover CSS puedes añadir efectos hover en cual cualquier elemento, como un botón, enlace o imagen. Los efectos incluyen transiciones 2D, transiciones de fondo, bordes, transiciones de shadow y glow, y mucho más. La librería está disponible en CSS, Sass y LESS.
Animatism (+100 efectos)
Cuenta con más de 100 animaciones hover para botones, overlays, detalles, leyendas, imágenes y botones para compartir en redes sociales. Todos los efectos están potenciados por CSS3.
Caption Hover Effect (7 efectos)
Hay 7 efectos muy vistosos en esta colección. Todas las transiciones lucen realmente profesionales y muy fluidas. Mirando el código fuente de la web, puedes ver cómo aplicar estos efectos en tus proyectos personales para que funcionen igual de bien que en la página de ejemplo.
CSS Image Hover Effects (15 efectos)
Una colección de efectos hover simples como zoom, slide, rotación, escala de grises, blur, opacidad y otros efectos básicos. Puedes utilizar estos efectos añadiendo la clase CSS antes de tu tag figure.
Direction-aware 3D hover effect
Esta es una librería super molona para efectos hover que detecta tu último movimiento con el ratón. La leyenda de la imagen se mostrará en función de una de las cuatro direcciones en las que has entrado a posarte en el elemento. Es decir, si me poso sobre el elemento desde la parte derecha, la leyenda se mostrará en la parte derecha del elemento. Muy, pero que muy bonito, y bastante útil.
Hover Animation
Con Hover Animation puedes realizar efectos hover basasdos en los bordes del elemento. Está fuertemente inspirado en UNIQLO. Tras el hover, el borde de la imagen se animará y quedará mucho más vistoso.
Tiles with Animated Hover
Una para diseños con tiles. Cuenta con efectos como slow zoom, pop-ins, overlay atenuado y muchos efectos más.
Fuente: hongkiat.com