Hover en tarjetas e imágenes

Tarjetas de producto, portafolios, planes de precios, equipos… Las tarjetas están en casi todos los sitios para clientes. Un buen efecto de hover las hace sentir interactivas y premium sin sacrificar legibilidad.

Concepto: transform y el espacio 3D

transform modifica cómo se dibuja un elemento sin cambiar el espacio que ocupa en el layout. Por eso es perfecto para animar:

Función	Efecto
translate(x, y)	Mover
scale(n)	Agrandar / reducir
rotate(deg)	Girar en 2D
rotateX() / rotateY()	Girar en 3D (necesita perspectiva)
skew()	Inclinar

Para que un giro 3D se vea con profundidad necesitas perspectiva:

.escena { perspective: 900px; }          /* en el padre: distancia del "ojo" */
.tarjeta { transform: rotateY(20deg); }   /* el hijo gira en 3D */

Cuanto menor el valor de perspective, más exagerado el efecto 3D.

Otras dos propiedades 3D que verás aquí:

• transform-style: preserve-3d: los hijos también viven en el espacio 3D (necesario para la flip card).
• backface-visibility: hidden: oculta la cara trasera de un elemento cuando está girado más de 90°.

Tarjeta con tilt 3D

La tarjeta se inclina siguiendo al mouse y un reflejo de luz recorre su superficie.

Tilt 3D con el mouse

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo funciona: JavaScript sólo actualiza variables CSS (--rx, --ry, --mx, --my) y el CSS hace el resto:

.tilt { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.tilt::after {
  background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .35), transparent 50%);
}

Los elementos internos usan translateZ() para "flotar" sobre la tarjeta, lo que da un efecto de capas muy vistoso. Con prefers-reduced-motion se conserva el brillo pero no la inclinación.

Flip card (tarjeta que se voltea)

Ideal para planes de precios, preguntas de un quiz o tarjetas de equipo con la bio detrás.

Flip card horizontal y vertical

✏️ Editar en el Playground↗ Abrir en pestaña nueva

La estructura siempre es la misma:

<div class="flip">               <!-- perspective -->
  <div class="flip-interior">    <!-- preserve-3d + transition -->
    <div class="cara frente">…</div>
    <div class="cara atras">…</div>  <!-- ya girada 180° -->
  </div>
</div>

Error común: no funciona en móviles

En pantallas táctiles no hay hover real. El demo añade un pequeño script que alterna la clase .volteada con un toque, y :focus-within permite voltearla con el teclado.

Efectos de hover en imágenes

Zoom, overlay con texto que sube, de gris a color y "levantar" con sombra.

Zoom, overlay, gris→color y levantar

✏️ Editar en el Playground↗ Abrir en pestaña nueva

El secreto del zoom es que el contenedor tenga overflow: hidden y que lo que se escale sea la imagen interior:

figure { overflow: hidden; border-radius: 16px; }
figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
figure:hover img { transform: scale(1.15); }

Imágenes en los demos

Para que los demos no dependan de archivos externos, las "imágenes" son degradados CSS en un <div class="img">. En tu proyecto reemplázalos por <img src="…" alt="…">: los estilos funcionan igual gracias a object-fit: cover.

Borde degradado giratorio

Un borde con un degradado cónico que gira sin parar. Muy usado en tarjetas destacadas ("Plan recomendado") y en sitios de IA/tecnología.

Borde con conic-gradient animado

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo funciona:

1. @property registra --angulo como un ángulo real. Sin esto, el navegador no sabe interpolar una variable y la animación "salta".
2. El elemento tiene dos fondos: uno sólido limitado a padding-box y el degradado cónico en border-box. El borde transparente deja ver el degradado.
3. Una animación cambia --angulo de 0deg a 360deg.

@property --angulo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.borde-giratorio {
  border: 3px solid transparent;
  background:
    linear-gradient(#111827, #111827) padding-box,
    conic-gradient(from var(--angulo), #f43f5e, #8b5cf6, #22d3ee, #f43f5e) border-box;
  animation: girar 4s linear infinite;
}
@keyframes girar { to { --angulo: 360deg; } }

@property funciona en todos los navegadores modernos. En uno antiguo, el borde simplemente se ve estático: una degradación elegante.

Ejercicios

1. Haz que la flip card gire al hacer clic en un botón "Ver más" en lugar de con hover.
2. Añade al efecto overlay un botón que aparezca con retraso de .15s después del texto.
3. Cambia los colores del borde giratorio por los de tu marca y reduce la velocidad a 8 s.

Ver solución del ejercicio 2

.overlay figcaption a {
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s .15s, transform .4s .15s;
}
.overlay:hover figcaption a { opacity: 1; transform: none; }

Resumen

• transform no afecta al layout: es la propiedad estrella para animar.
• 3D = perspective en el padre + rotateX/Y en el hijo (+ preserve-3d y backface-visibility para flips).
• Zoom de imagen = overflow: hidden en el contenedor + scale en la imagen.
• Actualizar variables CSS desde JS es la forma más limpia de conectar el mouse con el CSS.
• @property permite animar variables personalizadas (ángulos, colores, porcentajes).