01 Capítulo 1 · Lección 7

Hover Interactions

Redactado por
Author Sebastian V.
Fecha de publicación

31/03/2024

Tiempo de lectura

5 min

Tema

CSS Transitions

Dando vida a las interfaces estáticas

El estado :hover es probablemente la primera pseudo-clase que aprendiste en CSS. Es el puente principal entre el usuario y la computadora antes del clic. Una interacción de hover bien diseñada comunica tres cosas fundamentales: "Soy interactivo", "Te estoy escuchando" y "Esto es lo que haré si haces clic".

La técnica del Padre-Hijo

El error más común en diseño moderno es animar solo el elemento padre. En interfaces premium, cuando el usuario hace hover sobre una tarjeta (Card) o un contenedor, múltiples elementos hijos reaccionan simultáneamente de forma coreografiada.

Al aplicar el selector .card:hover .child, podemos controlar el comportamiento de la imagen, el texto y los botones basándonos en la interacción con el contenedor principal, creando una experiencia inmersiva.

Las 3 reglas del Hover Premium

  • ✦ Regla de Elevación: Un elemento clickeable debe sentirse físico. Al hacer hover, usa transform: translateY() para moverlo hacia el usuario y box-shadow para simular que se ha despegado del fondo.
  • ✦ Regla de Revelación: No muestres toda la información de golpe. Usa el hover para revelar sutilmente botones de acción o cambiar la opacidad de descripciones secundarias.
  • ✦ Regla de Contención: Mantén las duraciones cortas. Un hover debe reaccionar en menos de 0.3s para sentirse conectado al mouse.

Consejo profesional

Al escalar imágenes en hover (transform: scale(1.05)), asegúrate de que el contenedor padre tenga overflow: hidden. Esto crea un efecto de zoom de lente muy profesional.

Ejemplo práctico

> _ 
<div class="card">
  <div class="card-image"></div>
  <div class="card-content">
    <h3 class="card-title">Motion Design</h3>
    <p class="card-desc" style="font-size: 11px;">Eleva el nivel de tus interfaces con animaciones fluidas.</p>
    <button class="card-btn">Leer más</button>
  </div>
</div>
> _

Motion Design

Eleva el nivel de tus interfaces con animaciones fluidas.

Pasa el cursor sobre la tarjeta. Nota cómo 4 cosas ocurren a la vez: la tarjeta se eleva, la imagen crece, el texto se aclara y el botón aparece con un ligero retraso.

Errores comunes

01
Animar margin o padding Cambiar dimensiones estructurales empujará otros elementos de la página. Usa transform: translateY() en su lugar para mover cosas sin afectar el layout.
02
Olvidar el estado por defecto Asegúrate de definir una transición suave tanto para el :hover como para el estado base, para que no salte de golpe al quitar el cursor.

Practica lo aprendido

Combina múltiples transiciones en un solo contenedor.

01 Aplica el hover al contenedor padre, no a los hijos.
02 Usa transform: scale() en las imágenes para un efecto inmersivo.
03 Usa delays sutiles para revelar contenido secundario.
04 Nunca transiciones propiedades pesadas (width, margin) en un hover.
05 Añade una sombra profunda (box-shadow) para crear elevación.