Introducción

Este tutorial muestra cómo implementar un efecto hover suave en las imágenes destacadas de WordPress utilizando únicamente CSS (transform y transition). El enfoque es compatible con themes modernos, accesible y optimizado para rendimiento. Proporciona ejemplos de marcado PHP para integrar el envoltorio necesario y varios estilos CSS para adaptar el efecto a distintos diseños.

Concepto y objetivo

El objetivo es aplicar una ligera transformación (por ejemplo, un escalado) al contenido de la imagen al situar el cursor encima, usando transition para suavizar el cambio. La técnica mantiene el flujo del documento intacto (sin cambios de layout), evita reflujo innecesario y funciona bien con imágenes responsive.

Principios clave

• transform: realiza la animación de la imagen (por ejemplo scale, rotate).
• transition: controla la duración y la curva de la animación para que sea suave.
• overflow: hidden en el contenedor evita que la imagen sobresalga al escalarla.
• will-change: sugiere al navegador optimizar la animación.

Requisitos previos

• Un child theme o theme propio donde añadir CSS y editar plantillas (template files).
• Soporte de imágenes destacadas (add_theme_support(post-thumbnails)).
• Imágenes con tamaños adecuados y responsive (srcset/sizes generados por WordPress).

Estructura HTML/WordPress recomendada

Coloca la miniatura dentro de un enlace o contenedor con una clase que identifique el componente visual. Ejemplo de marcado dentro del loop de WordPress:

lt?php
if ( has_post_thumbnail() ) : ?>
  lta href=lt?php the_permalink() ?gt class=featured-image-link>
    lt?php the_post_thumbnail( post-thumbnail, array( class =gt featured-image, loading =gt lazy, alt =gt get_the_title() ) ) ?gt
  lt/agt
lt?php endif ?gt

CSS básico: efecto hover suave

Este CSS crea un zoom suave al pasar el cursor. Puedes ajustar la escala, duración y la función de timing.

/ Contenedor: evita que la imagen sobresalga /
.featured-image-link {
  display: block               / permite dimensiones /
  overflow: hidden             / recorta la imagen al escalar /
  border-radius: 6px           / opcional: redondeado /
}

/ Imagen: transición y optimización /
.featured-image {
  display: block
  width: 100%
  height: auto
  transform: translateZ(0)     / fuerza capa propia /
  will-change: transform       / sugiere optimización /
  transition: transform 350ms cubic-bezier(.2,.8,.2,1) / suavizado /
  backface-visibility: hidden  / mejora rendimiento en algunos navegadores /
}

/ Hover: escala suave /
.featured-image-link:hover .featured-image,
.featured-image-link:focus .featured-image {
  transform: scale(1.08)       / ajusta el factor según diseño /
}

Explicación de las reglas

1. overflow: hidden en el contenedor evita que la imagen escalada sobresalga y rompa el layout.
2. transition define la duración y la curva cubic-bezier permite un acabado más natural que ease.
3. will-change y translateZ(0) estimulan al navegador a usar compositing en GPU, mejorando la fluidez.
4. Se orienta la interacción tanto para :hover como para :focus por accesibilidad (teclado).

Variantes y mejoras

Algunas variantes útiles para adaptar el efecto:

Zoom desenfoque o escala sutil

/ Zoom más suave y ligera saturación /
.featured-image {
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 420ms
}
.featured-image-link:hover .featured-image {
  transform: scale(1.06)
  filter: saturate(1.05)
}

Grayscale a color al pasar el cursor

.featured-image {
  filter: grayscale(100%)
  transition: transform 360ms, filter 360ms
}
.featured-image-link:hover .featured-image {
  transform: scale(1.06)
  filter: grayscale(0%)
}

Pequeño giro (tilt) y sombra

.featured-image-link {
  transition: box-shadow 300ms
}
.featured-image {
  transition: transform 360ms
}
.featured-image-link:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.12)
}
.featured-image-link:hover .featured-image {
  transform: scale(1.03) rotate(-0.6deg)
}

Integración en el loop (ejemplo completo de plantilla)

Ejemplo de cómo incluir la marca en un archivo de plantilla (index.php, content.php o similar):

lt?php while ( have_posts() ) : the_post() ?gt
  ltarticle id=post-lt?php the_ID() ?gt 
Accesibilidad y SEO

Siempre proporcionar un atributo alt descriptivo. En la mayoría de los casos get_the_title() funciona, pero si la imagen representa otra cosa, use un texto más preciso.
Hacer que el contenedor sea accesible con :focus y tabindex si es necesario.
Evitar animaciones demasiado rápidas o bruscas que puedan afectar a usuarios sensibles.

Rendimiento y mejores prácticas

Usa imágenes optimizadas y tamaños adecuados (registra tamaños personalizados si hace falta).
Confía en el lazy-loading nativo de WordPress (atributo loading=lazy) o en soluciones bien probadas.
Evita animaciones que afecten layout utilizar transform y opacity es más eficiente que animar width/height/top/left.
Prueba en dispositivos móviles y reduce la escala o desactiva la animación si no resulta adecuada en pantallas pequeñas (media queries).

Ejemplo completo de CSS   PHP listo para copiar
CSS principal para añadir a style.css del child theme o a un archivo de estilos encolado:
/ Featured image hover - efecto suave por defecto /
.featured-image-link {
  display: block
  overflow: hidden
  border-radius: 8px
}

.featured-image {
  display: block
  width: 100%
  height: auto
  transform: translateZ(0)
  will-change: transform
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), filter 360ms
  backface-visibility: hidden
}

/ Hover / Focus /
.featured-image-link:hover .featured-image,
.featured-image-link:focus .featured-image {
  transform: scale(1.08)
}

PHP para la plantilla (usar dentro del loop):
lt?php if ( has_post_thumbnail() ) : ?gt
  lta href=lt?php the_permalink() ?gt class=featured-image-linkgt
    lt?php the_post_thumbnail( post-thumbnail, array(
      class =gt featured-image,
      loading =gt lazy,
      alt =gt get_the_title()
    ) ) ?gt
  lt/agt
lt?php endif ?gt

Consejos finales

Prueba distintos valores de scale y duración hasta encontrar el equilibrio visual del theme.
Considera desactivar efectos en dispositivos táctiles mediante media queries o detectando pointer: coarse.
Mantén la consistencia en todo el sitio: misma intensidad de efecto para grid y entradas.

Con estas instrucciones tendrás un efecto hover suave y profesional para las imágenes destacadas en WordPress usando únicamente transform y transition, fácil de mantener e integrable en la mayoría de themes.