Hoy dejo un pequeño efecto CSS para crear un fondo animado al hacer hover sobre un elemento.
El efecto hace que un fondo entre por la izquierda y salga por la derecha cuando el usuario pasa el cursor.
Puede aplicarse a enlaces, cabeceras, textos o elementos interactivos.
Idea básica
Este tipo de efecto suele apoyarse en pseudo-elementos como ::before o ::after, transiciones y transform.
La clave es no abusar.
Un hover debe ayudar a entender que algo es interactivo, no convertir la interfaz en una feria de animaciones.
Buenas prácticas
- Mantén la animación rápida.
- Asegura buen contraste.
- No dependas solo del hover en móvil.
- Comprueba que no afecta a legibilidad.
- Evita animaciones pesadas.
El CSS puede mejorar mucho una interfaz, pero también puede empeorar rendimiento si se usa sin control. Ya lo vimos al hablar de modo oscuro con CSS y de rendimiento con PageSpeed.
Si quieres revisar microinteracciones, CSS o detalles visuales de tu web, puedes escribirme a ajra@ajra.es.