Tutorial WordPress: Añadir sombras suaves solo en hover para tarjetas de post

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo añadir sombras suaves únicamente cuando el usuario pasa el ratón (hover) sobre las tarjetas de post en WordPress. Incluye ejemplos de marcado para la card, CSS optimizado y accesible, cómo añadir el CSS en un tema hijo o mediante enqueue en functions.php, y soluciones a problemas habituales como clipping por overflow, soporte para teclado y preferencia de movimiento reducido.

Concepto y objetivos

Objetivo visual: sombra suave y sutil que aparezca al hacer hover para dar sensación de elevación.
Comportamiento accesible: la misma elevación se aplique al foco por teclado (focus-visible) para usuarios que navegan sin ratón.
Rendimiento: minimizar repintados costosos y respetar prefers-reduced-motion.
Compatibilidad: funcionar en archivos de archivo (archive), loop del índice, bloques personalizados y widgets que usen la clase de tarjeta.

Estructura HTML recomendada para una tarjeta de post

La idea es envolver el contenido de la tarjeta en un contenedor que reciba la sombra. Evita aplicar la sombra directamente a imágenes que estén cortadas por overflow hidden, porque la sombra puede quedar recortada.

Ejemplo de marcado dentro del Loop de WordPress

ltarticle id=post-lt?php the_ID() ?gt

CSS: sombra suave solo en hover (y focus-visible)

A continuación tienes una solución CSS completa. Usa variables CSS para poder ajustar valores desde un lugar y distintos tamaños de sombra por defecto.

:root{
  --card-bg: #ffffff
  --card-radius: 8px
  --card-transition: 250ms cubic-bezier(.2,.8,.2,1)
  --card-shadow-color: rgba(17,24,39,0.12) / color base para la sombra /
  --card-shadow: 0 6px 18px var(--card-shadow-color)
  --card-shadow-hover-translate: -6px / elevación /
}

/ Contenedor base de la tarjeta /
.post-card{
  background: var(--card-bg)
  border-radius: var(--card-radius)
  overflow: visible / importante para que la sombra no quede recortada si está en wrapper /
  transition: transform var(--card-transition), box-shadow var(--card-transition)
  will-change: transform, box-shadow
  / Evitar sombra por defecto /
  box-shadow: none
  position: relative
  z-index: 0
}

/ Enlaces ocupando toda la tarjeta para accesibilidad /
.post-card__link{
  display: block
  color: inherit
  text-decoration: none
  border-radius: inherit
  overflow: hidden / si necesitas recortar la imagen internamente /
}

/ Imagen dentro de tarjeta: cubrir y mantener flujo /
.post-card__media{
  width: 100%
  height: 180px
  overflow: hidden / recorta la imagen dentro del contenedor de media /
  background: #f5f5f5
}
.post-card__img{
  width: 100%
  height: 100%
  object-fit: cover
  display: block
  transition: transform var(--card-transition)
}

/ Elevación al hover y al focus-visible (teclado) /
.post-card:hover,
.post-card:focus-within,
.post-card:focus {
  transform: translateY(var(--card-shadow-hover-translate))
  box-shadow: var(--card-shadow)
  z-index: 2 / elevar sobre otros elementos si hace falta /
}

/ También aplicar al link por accesibilidad permite que el foco del link muestre la sombra /
.post-card__link:focus,
.post-card__link:focus-visible{
  outline: none / si usas outline propia /
}

/ Respectar preferencia de reducir movimiento /
@media (prefers-reduced-motion: reduce){
  .post-card,
  .post-card__img{
    transition: none
  }
  .post-card{
    transform: none
  }
}

/ Variantes: sombras más suaves o más intensas definidas por clase /
.post-card--soft:hover { --card-shadow-color: rgba(17,24,39,0.08) --card-shadow-hover-translate: -4px }
.post-card--medium:hover { --card-shadow-color: rgba(17,24,39,0.12) --card-shadow-hover-translate: -6px }
.post-card--strong:hover { --card-shadow-color: rgba(17,24,39,0.18) --card-shadow-hover-translate: -10px }

Explicación técnica

Usamos box-shadow solo en :hover/:focus-within para que en estado normal no haya sombras que carguen el render.
transform: translateY crea una elevación perceptual que es más barata que sombras extremadamente complejas y funciona bien junto con box-shadow.
will-change, transition y prefers-reduced-motion mejoran la experiencia y el rendimiento.
overflow: visible en la tarjeta evita que la sombra se recorte si necesitas recortar la imagen interna, hazlo en un contenedor hijo (.post-card__media).

Cómo añadir el CSS a tu tema WordPress

Si usas un tema hijo, añade el CSS en style.css del child theme (preferible para cambios permanentes).
Si prefieres no tocar archivos, pega el CSS en Personalizar > CSS adicional.
Para una solución programática, encola un archivo CSS desde functions.php del tema hijo.

Ejemplo de enqueue en functions.php (tema hijo)

function mi_tema_hijo_enqueue_styles(){
  wp_enqueue_style(mi-card-hover-css, get_stylesheet_directory_uri() . /css/card-hover.css, array(), 1.0)
}
add_action(wp_enqueue_scripts, mi_tema_hijo_enqueue_styles)

Integración con Gutenberg / bloques

Si tus tarjetas proceden de un bloque (block editor o un bloque de patrones), el CSS anterior también se aplicará si las clases coinciden. Para estilos que aparezcan en el editor, añade un archivo editor-style o usa add_editor_style para que el editor refleje la apariencia.

Agregar estilos al editor

function mi_tema_editor_styles(){
  add_editor_style( css/editor-block-styles.css )
}
add_action( after_setup_theme, mi_tema_editor_styles )

Accesibilidad y teclado

Incluye :focus-visible o :focus-within para que usuarios de teclado vean la misma elevación que los usuarios de ratón.
No elimines por completo los outlines sin proporcionar una alternativa visible (por ejemplo, una sombra leve outline personalizado).
Respeta prefers-reduced-motion para usuarios sensibles a animaciones.

Problemas comunes y soluciones

Sombra recortada: Si el contenedor padre tiene overflow: hidden, la sombra puede desaparecer. Solución: aplica overflow: visible al contenedor de la tarjeta y usa overflow: hidden sólo en el contenedor de la imagen interna.
Sombra no aparece en tablas o grid con clipping: asegúrate de que el z-index y position permitan a la tarjeta elevarse (position: relative y z-index mayor al normal).
Rendimiento: sombras con blur muy grande o muchas capas pueden costar mantén la sombra simple y usa transform para la elevación.

Opción avanzada: controlar la sombra desde el Customizer

Puedes crear una opción en Personalizar para activar/desactivar la sombra o ajustar su intensidad. El ejemplo siguiente añade una opción booleana simple y output CSS en el head.

function mi_customizer_register( wp_customize ) {
  wp_customize->add_section(mi_card_efectos, array(
    title => Efectos en tarjetas,
    priority => 160,
  ))
  wp_customize->add_setting(mi_card_sombra_habilitada, array(
    default => true,
    sanitize_callback => wp_validate_boolean,
  ))
  wp_customize->add_control(mi_card_sombra_habilitada, array(
    label => Habilitar sombra en hover,
    section => mi_card_efectos,
    type => checkbox,
  ))
}
add_action(customize_register, mi_customizer_register)

function mi_card_custom_css_output() {
  habilitada = get_theme_mod(mi_card_sombra_habilitada, true)
  if ( ! habilitada ) {
    return
  }
  ?>
  ltstylegt
  .post-card:hover { box-shadow: 0 8px 20px rgba(17,24,39,0.12) transform: translateY(-6px) }
  lt/stylegt
  
Variantes y mejoras estéticas

Animar también una ligera escala a la imagen (.post-card__img { transform: scale(1.03) } en hover) para un efecto más dinámico, siempre con prefers-reduced-motion en cuenta.
Usar drop-shadow en imágenes si necesitas que la sombra siga la forma de la imagen (svg/recortes) en vez del rectángulo.
Combinar con microinteracciones: cambiar el color del título o el icono al aparecer la sombra para reforzar la sensación de interacción.

Resumen de pasos rápidos

Añade la clase .post-card a las tarjetas en tu loop o bloque.
Inserta el CSS mostrado en tu style.css del tema hijo o en CSS adicional del Personalizador.
Comprueba focus-visible y añade soporte para prefers-reduced-motion.
Si el layout recorta la sombra, mueve overflow: hidden al contenedor interno y mantén visible el wrapper de la tarjeta.

Enlaces útiles

Documentación oficial de WordPress
MDN — box-shadow, prefers-reduced-motion, focus-visible

Conclusión
Aplicar una sombra suave solo en hover para tarjetas de post es una mejora visual simple que, bien implementada, aporta mayor claridad y jerarquía a tus listas de contenidos. Con la estructura que aquí se propone (wrapper visible, recorte solo en la media, CSS con variables y soporte para teclado y reducción de movimiento) obtendrás un resultado elegante, accesible y eficiente en cuanto a rendimiento.

SushiHost