Maquetación Web Dinámica / Transformaciones y transiciones

Reto: galería con hover premium

Reto35 min60 XP

Los sitios que se sienten "caros" casi nunca hacen cosas espectaculares: hacen cosas PEQUEÑAS impecablemente calibradas. Este reto es de calibración pura — escala sutil, giro de un par de grados, sombra que responde — y su regla más difícil no es técnica: es contenerte.

Reto

Galería premium: el arte del micro-movimiento

Media30 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una galería de obras (o productos) donde cada tarjeta responde al cursor con movimiento sutil, sombra y foco — y las demás ceden protagonismo:

<div class="galeria">
<a href="#" class="obra"><div class="lienzo l1"></div><h3>Amanecer andino</h3><p>Óleo · 2024</p></a>
<a href="#" class="obra"><div class="lienzo l2"></div><h3>Cartagena nocturna</h3><p>Acrílico · 2023</p></a>
<a href="#" class="obra"><div class="lienzo l3"></div><h3>Páramo</h3><p>Mixta · 2025</p></a>
</div>
<p class="nota">Hover sobre una obra: ella crece y se ilumina; las otras se atenúan. Tab también funciona.</p>

body { font-family: system-ui; padding: 24px; background: #f1f5f9; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 640px; }
.obra { display: block; background: white; border-radius: 14px; padding: 10px; text-decoration: none; transition: transform 200ms ease-out, box-shadow 200ms ease-out, opacity 200ms ease-out; }
.lienzo { height: 130px; border-radius: 10px; }
.l1 { background: linear-gradient(135deg, #fbbf24, #ea580c); }
.l2 { background: linear-gradient(135deg, #1e1b4b, #6d28d9); }
.l3 { background: linear-gradient(135deg, #14532d, #22c55e); }
.obra h3 { margin: 10px 0 2px; font-size: 14px; color: #1e293b; }
.obra p { margin: 0; font-size: 12px; color: #64748b; }
.obra:hover, .obra:focus-visible { transform: translateY(-6px) scale(1.03) rotate(-1deg); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18); }
.obra:focus-visible { outline: 3px solid #6d28d9; outline-offset: 2px; }
.galeria:has(.obra:hover) .obra:not(:hover) { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .obra { transition: none; } }
.nota { font-size: 13px; color: #475569; margin-top: 16px; }

Requisitos:

Grid de 3 tarjetas mínimo, cada una un enlace real (<a>) con imagen simulada (gradiente), título y metadato.
Al hover Y al foco de teclado: la tarjeta sube (translateY), crece apenas (scale entre 1.02 y 1.04) y se ladea con personalidad (rotate de ±1-2°, no más).
Sombra que responde: en reposo casi nada; al hover, una sombra amplia y difusa que "levanta" la tarjeta (transiciona junto con el transform).
Las demás tarjetas se atenúan cuando una tiene hover — el patrón :has() del módulo 9.
Transiciones de 150-250ms con ease-out explícito, declaradas en el estado base, con su prefers-reduced-motion.

Reglas

Las únicas propiedades que transicionan: transform, box-shadow y opacity. Nada de animar width, margin ni top.
Presupuesto de movimiento: máximo 6px de elevación, 4% de escala, 2° de giro. Pasarte del presupuesto es fallar el reto — lo premium vive en el "casi no pasó nada".
Sombra con rgba suave (opacidad ≤ 0.2), nunca negro sólido.

30:00

Cuando estés listo, arranca el reloj.

El razonamiento — aquí las decisiones son de criterio más que de sintaxis:

El presupuesto de movimiento es el diseño. translateY(-6px) scale(1.03) rotate(-1deg) combina tres transformaciones tan pequeñas que ninguna se percibe por separado — se percibe "vida". Duplica esos valores y la misma galería se vuelve una feria. La restricción del enunciado ERA la lección.
La sombra cuenta la historia física. Si la tarjeta "sube", algo debe alejarse del suelo: sombra más grande, más difusa y MÁS SUAVE (los objetos elevados proyectan sombras tenues). Por eso transiciona en sincronía con el transform — luz y movimiento son un solo evento.
Hover y foco son el mismo estado. Cada :hover de interacción lleva su :focus-visible gemelo desde el primer borrador — no como parche final. El teclado no es un usuario de segunda.

galeria.css

Autoevaluación: ¿el efecto se siente al usarlo pero es difícil DESCRIBIR qué se movió? (buena señal). ¿Tab recorre las obras con el mismo levantamiento que el cursor? ¿Las transiciones viven en .obra y no en el :hover? ¿Respetaste el presupuesto — de verdad?

Qué sigue

Módulo 10 cerrado: transformas en 2D y 3D, pivoteas donde quieres y todo viaja con curvas de calidad. Pero las transiciones tienen una limitación de nacimiento: necesitan un DETONANTE (hover, foco, un cambio de estado). El módulo 11 rompe esa dependencia con @keyframes — animaciones que viven solas: pulsos, spinners, escenas en loop y hasta animaciones dirigidas por el scroll. CSS en movimiento perpetuo.