Animaciones hover

Una animación hover es una única clase que reproduce un efecto puro de CSS mientras el puntero está sobre un elemento — no hace falta activar ningún módulo ni cargar ningún script. Va bien en botones, tarjetas e iconos. Usa solo una clase hover por elemento.

Míralo en acción: Hover animations en fancyanimations.com.

Animaciones

Animación	Al pasar el cursor
Float	Se eleva ligeramente y se agranda un poco
Float + shadow	La misma elevación, con una sombra añadida
Zoom	Crece, con una curva de easing con rebote
Zoom out	Se encoge ligeramente, con la misma curva con rebote
Wobble — horizontal / vertical	Tiembla de lado a lado / arriba y abajo, y se asienta de nuevo en reposo
Wobble — top / bottom anchored	Un wobble inclinado, anclado en el borde inferior o superior
Ring (4 colores de paleta × 3 tamaños)	Un anillo de color pulsa hacia fuera una vez por cada hover

• Float y Zoom son transiciones CSS: el elemento recibe un transition: all de medio segundo, lo que significa que cualquier otro cambio en hover que hayas añadido tú mismo (un cambio de color, por ejemplo) también tarda ahora medio segundo.
• Wobble y Ring son animaciones cortas por keyframes (0.7s) que se reproducen cada vez que el puntero entra.
• Los colores de Ring vienen de la paleta de colores de animación del sitio.
• En pantallas táctiles, los efectos hover solo se muestran al tocar, si es que se muestran — diseña pensando en eso en vez de depender de ellos.

Si el mismo elemento también tiene una animación de entrada, pasar el cursor sobre él detiene la animación de entrada y muestra su estado final — eso es el comportamiento esperado, no un fallo.

Bricks

Pestaña Style → hover Animations. Añade la animación desde el desplegable (los nombres coinciden con la tabla de arriba, sin ningún prefijo).

Una animación hover por elemento, elegida en la pestaña Style.

Etch

Añade la clase desde el panel Fancy → Hover — mantiene un solo efecto hover a la vez, igual que en los demás builders.

Gutenberg

No hay un panel hover dedicado en el editor de bloques. Añade la clase a mano en el campo Advanced → Additional CSS class(es) del bloque.

Problemas comunes

• Float o Zoom saltan en vez de suavizarse con una transición fluida. El mismo elemento también tiene una clase de scroll trigger, que fuerza todas sus transiciones a 0s — y además un preset de scroll puede estar escribiendo también transform, lo que entraría en conflicto de todos modos. Pon la clase hover en un wrapper o en un hijo en su lugar, o (3.2.0+) activa Allow own transitions en el elemento animado por scroll.
• Una transformación de hover compite con otra transformación en el mismo elemento. Una animación de ratón o una transformación propia tuya está compitiendo con Float/Zoom por la misma propiedad CSS. Mantén una sola fuente de transformación por elemento y anida los efectos en su lugar.
• El anillo (ring) es invisible. El color de paleta elegido está demasiado cerca del color de fondo (un anillo blanco sobre una tarjeta blanca, por ejemplo). Elige otra variante de paleta.