Border Fade

El color de fondo y el del texto se funden hacia un nuevo color al pasar el cursor.

Añade un efecto hover "Background Fade" (también llamado color fade) en [dónde].
Los colores del fondo y del texto deben fundirse suavemente hacia nuevos colores mientras el cursor está sobre el elemento, y volver al salir: tranquilo, sin movimiento.
Mantén suficiente contraste entre texto y fondo en ambos estados y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, aparece una línea de borde interior dentro del contorno del elemento.

Añade un efecto hover "Trim" en [dónde].
Una línea fina debe aparecer con un fundido justo dentro del borde del elemento mientras el cursor está encima, y desvanecerse cuando sale: sutil, sin movimiento.
Mantén la línea dentro del elemento para que su tamaño no cambie y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, un contorno crece hacia fuera desde el elemento o se contrae hacia él.

Añade un efecto hover "Outline Expand" en [dónde].
Un contorno debe empezar pegado al borde del elemento y moverse hacia fuera hasta dejar un pequeño espacio alrededor, quedarse ahí durante el hover y volver a cerrarse cuando salga el puntero: suave y rápido.
Dibuja el contorno de forma que no cambie el tamaño del elemento ni empuje el contenido cercano, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el fondo relleno se vacía y deja solo el botón con contorno.

Añade un efecto hover "Hollow" (también llamado ghost fill) en [dónde].
El fondo relleno debe desvanecerse hasta dejar solo el contorno, y el color del texto debe cambiar para seguir siendo legible sobre el fondo vacío: suave y rápido.
Mantén el mismo grosor de borde en ambos estados para que el elemento no cambie de tamaño, y muestra el mismo efecto con el foco del teclado.

Anillos de borde concéntricos se expanden hacia fuera o se contraen hacia dentro desde el elemento al pasar el cursor.

Añade un efecto hover "Border Ripple" en [dónde].
Cuando entra el cursor, un par de anillos de borde deben expandirse desde el elemento uno tras otro y desvanecerse: rápido y ligero, como una onda en el agua.
Reprodúcelo una vez por hover en lugar de repetirlo en bucle y no dejes que los anillos desplacen el diseño de alrededor.

El elemento cambia de escala con un rebote elástico que se pasa un poco al empezar o terminar el hover.

Añade un efecto hover "Bounce Scale" (también llamado bounce in / out) en [dónde].
El elemento debe agrandarse un poco con un rebote elástico visible, pasándose brevemente de su tamaño final antes de asentarse, y volver con el mismo rebote cuando el cursor sale.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

Un fondo resaltado se desliza entre las tarjetas de una cuadrícula para seguir a la que está bajo el cursor.

Añade un "Card Hover Effect" (también llamado sliding highlight card grid) en [dónde].
Un fondo resaltado suave debe aparecer detrás de la tarjeta bajo el cursor y deslizarse con fluidez hasta la siguiente tarjeta a la que se mueva el cursor, desvaneciéndose cuando el cursor sale de la cuadrícula.
Haz que el foco del teclado mueva el resaltado de la misma forma y evita que las propias tarjetas se desplacen.