Direction Aware Hover

Un fondo de color recorre el elemento desde un borde al pasar el cursor.

Añade un efecto hover "Background Sweep" (también llamado background fill o slide fill) en [dónde].
Un nuevo color de fondo debe recorrer el elemento del borde izquierdo al derecho, suave y rápido, sin rebote, y retirarse igual cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible.
Mantén el relleno recortado dentro de la forma del elemento y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, el texto del botón sale deslizándose y entran una flecha y un relleno que se expande.

Añade un efecto "Interactive Hover Button" en [dónde].
El pequeño punto junto al texto debe expandirse hasta llenar el botón mientras el texto se desliza hacia un lado y se desvanece, y el texto con una flecha entra deslizándose sobre el nuevo relleno: suave y rápido.
Mantén fijo el tamaño del botón y el texto legible en todo momento, y muestra el mismo efecto con el foco del teclado.

Los iconos de una fila crecen suavemente a medida que se acerca el cursor, como el Dock de macOS.

Añade un efecto "Dock Magnification" (también llamado dock) en [dónde].
Los iconos de la fila deben crecer suavemente a medida que se acerca el cursor, con el más cercano como el más grande y sus vecinos algo agrandados, y volver todos a su tamaño normal cuando el cursor sale.
Haz que los iconos crezcan hacia arriba desde una línea base fija y que todos sigan siendo usables a su tamaño normal con toque y teclado.

El elemento sube unos píxeles al pasar el cursor, como si flotara.

Añade un efecto hover "Float" (también llamado lift o raise) en [dónde].
El elemento debe subir un poco y quedarse elevado mientras el cursor está encima, y volver a su sitio cuando sale: suave y delicado, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

Las tarjetas vecinas se desenfocan y oscurecen mientras la tarjeta bajo el cursor se mantiene nítida.

Añade un efecto "Focus Cards" (también llamado blur siblings on hover, hover focus blur o card hover effect) en [dónde].
Mientras el cursor esté sobre una tarjeta, las demás deben desenfocarse, oscurecerse y encogerse un poco mientras la tarjeta bajo el cursor sigue nítida, todo con un fundido suave que se invierte cuando el cursor sale.
Aplica el mismo enfoque con el foco del teclado y mantén todas las tarjetas nítidas y legibles cuando no hay ninguna bajo el cursor.