Imagen con efecto zoom en el módulo de blog de Divi

Con este tutorial lograrás darle un toque de personalización a tu blog hecho con Divi de una manera genial, además es un tutorial pedido por uno de nuestros suscriptores, así que como siempre, manos a la obra. Puedes ver el resultado del tutorial en nuestra demo:

Paso 1: Crear una página con el módulo del blog

Para el primer paso solo debemos crear cualquier página nueva e insertar allí el módulo del blog de Divi. A este módulo de blog podemos darle los estilos que queramos, en el caso del ejemplo le dimos estilos de rejilla, ajustamos el canalón del ancho de la fila a dos y colocamos los bordes de los post con 10 px.

Además de esto, le dimos una pequeña sombra al módulo del blog y también activamos la opción de "capa super puesta" al momento de pasar el mouse on hover.

Ya sabes que para darles estilos personalizados al blog tenemos todos estos tutoriales donde te enseñamos a hacerle muchas modificaciones al módulo del blog en Divi.

Paso 2: Colocar los estilos de CSS personalizados para que la imagen tome el efecto zoom en tu blog.

Una vez tengamos todos los estilos del blog que queramos, vamos a aplicar el CSS necesario para lograr el efecto de imagen zoom en tu blog hecho con Divi.

Ya sabes que si quieres que el CSS se aplique para todos los módulos de tu sitio web hecho con Divi, debes colocarlo en Divi > Opciones del tema > CSS personalizado.

En nuestro caso, como queríamos que solo aplicara al módulo del blog que tenemos en la página en cuestión, lo aplicamos en Opciones de página > avanzado > CSS personalizado.

Puedes ver todos los detalles anteriores en el video tutorial de la parte superior.

Este es el CSS que vamos a aplicar:

/*CSS para crear animación en imagen del blog*/

/*Ajustes de espaciado de imagen*/

.et_pb_blog_grid .et_audio_content, .et_pb_blog_grid .et_main_video_container,
.et_pb_blog_grid .et_pb_post .et_pb_slider, .et_pb_image_container {
    margin: -20px -20px 0px;
}


/*Mantener el zoom en la franja de la imagen*/

.et_pb_blog_grid .et_pb_image_container {
	overflow: hidden;
}


/*Pequeña transición al efecto de zoom*/

.et_pb_blog_grid .et_pb_image_container img {
	transition: all 0.95s ease;
	-moz-transition: all 0.95s ease;
	-webkit-transition: all 0.95s ease;
}


/*Efecto de zoom sobre la imagen del blog on hover*/

.et_pb_blog_grid .et_pb_post:hover img {
	transform: scale(1.15) rotate(-10deg);
	-moz-transform: scale(1.15) rotate(-10deg);
	-webkit-transform: scale(1.15) rotate(-10deg);
}

¡Y Listo!

Una vez que insertes el CSS personalizado, podrás ver un resultado como este:

Entendiendo el CSS: qué hace cada parte del snippet

Cuando ves el código por primera vez puede parecer intimidante, pero en realidad cada bloque cumple una función muy específica y vale la pena entenderlo para que puedas adaptarlo a tus propios proyectos con total libertad.

El primer bloque ajusta los márgenes negativos de la imagen. Esto se hace porque el módulo de blog de Divi, en su layout de rejilla, agrega padding interno a cada tarjeta. Si no compensamos esos márgenes, la imagen no va a cubrir toda la tarjeta y verás espacios blancos en los bordes. Con el margen de -20px en los lados y arriba nos aseguramos de que la imagen ocupe el ancho completo de la tarjeta desde el borde superior.

El segundo bloque, el que usa overflow: hidden, es el más importante de todo el snippet. Este es el que "recorta" la imagen cuando se amplía. Sin esta línea, al hacer zoom la imagen se derramaría fuera de los límites de la tarjeta y quedaría superpuesta sobre las tarjetas vecinas, arruinando el diseño. Con overflow: hidden el efecto queda perfectamente contenido dentro del elemento padre.

Consejo: El valor overflow: hidden es una herramienta esencial en cualquier efecto hover con imágenes en CSS. Siempre que apliques un transform: scale() a una imagen, asegúrate de que el contenedor padre tenga overflow: hidden para controlar el desborde.

El tercer bloque define la transición. Aquí usamos transition: all 0.95s ease, lo que significa que cualquier propiedad CSS que cambie al hacer hover se va a animar con una duración de 0.95 segundos y una curva de aceleración suave. Ese valor de 0.95 segundos es deliberado: es suficientemente lento para que el efecto se vea elegante, pero no tan lento como para hacerse tedioso. Puedes ajustar ese número a tu gusto: con 0.5s el zoom será más rápido y agresivo, con 1.5s será más cinematográfico.

El cuarto bloque es donde ocurre la magia del efecto en sí. Al hacer hover sobre el post, aplicamos dos transformaciones simultáneas: scale(1.15) que amplía la imagen al 115% de su tamaño original, y rotate(-10deg) que la rota 10 grados en sentido antihorario. Esta combinación de zoom más rotación es lo que le da ese toque dinámico y moderno que distingue este efecto de un simple zoom plano.

Variantes del efecto: personaliza el zoom a tu estilo

El snippet que te entregué es el punto de partida, pero no tienes que usarlo exactamente así. Una de las cosas que más me gusta de trabajar con CSS en Divi es que puedes ajustar cualquier valor para obtener resultados completamente diferentes sin tocar ninguna configuración del constructor visual.

Si quieres un zoom sin rotación, simplemente elimina el rotate(-10deg) de la regla de hover y deja solo el scale(1.15). El resultado es más sobrio y profesional, ideal para blogs corporativos o portfolios donde la rotación podría sentirse demasiado informal.

Si quieres un zoom más sutil, cambia el valor de escala a scale(1.05). Con ese valor el efecto es casi imperceptible a primera vista pero añade una sensación de vida que los usuarios notan inconscientemente. En cambio, si quieres algo más dramático y llamativo, puedes subir a scale(1.25) o incluso scale(1.3).

Consejo: Si usas imágenes verticales en tu módulo de blog, el efecto de rotación puede recortar partes importantes de la imagen. En ese caso te recomiendo desactivar el rotate y usar solo el scale, así evitas perder contenido relevante en los bordes.

Otra variante interesante es cambiar la dirección de la rotación. El snippet original usa rotate(-10deg), que rota hacia la izquierda. Puedes probar con rotate(10deg) para rotar hacia la derecha. Y si combinas esto con la opción de "capa superpuesta" del módulo de blog (el overlay de color al hacer hover), obtienes un efecto bicapa muy atractivo: la imagen se mueve por debajo mientras el overlay aparece por encima.

Dónde aplicar el CSS: global vs. por página

Una pregunta que me hacen constantemente es dónde exactamente colocar el CSS personalizado para este tipo de efectos. La respuesta depende de qué tan amplio quieres que sea el efecto en tu sitio.

Si tienes un solo módulo de blog en todo tu sitio web y quieres que el efecto solo aplique en esa página, la mejor opción es ir a Configuración de página > Avanzado > CSS personalizado de esa página específica. De esta manera el CSS solo carga en esa URL y no añade peso innecesario al resto del sitio.

Si tienes múltiples módulos de blog en distintas páginas y quieres el mismo efecto en todos, entonces el lugar correcto es Divi > Opciones del tema > Integración > CSS personalizado. Este CSS se carga de manera global en todo el sitio, así que con una sola declaración cubres todos los módulos de blog.

También existe una tercera opción que te da un control más granular: si le asignas un ID CSS al módulo de blog específico (desde las opciones del módulo, en la pestaña Avanzado, campo ID CSS), puedes usar ese ID como prefijo en tus selectores. Por ejemplo, si le asignas el ID blog-principal, tu selector de hover quedaría #blog-principal .et_pb_post:hover img. Así puedes tener diferentes efectos en distintos módulos de blog dentro del mismo sitio.

Compatibilidad con Divi 5

Si ya estás usando Divi 5 o estás en proceso de migración, es importante que sepas que los selectores CSS del módulo de blog cambiaron. Divi 5 usa una arquitectura de componentes diferente y los nombres de clases como .et_pb_blog_grid y .et_pb_image_container pueden no estar presentes o pueden tener un comportamiento distinto.

En Divi 5 el enfoque recomendado es usar las variables CSS nativas del Design System y las opciones de hover que trae el propio constructor. Si ya migraste a Divi 5, te conviene revisar el inspector de elementos de tu navegador para identificar las clases exactas que genera el módulo de blog en la nueva versión, y adaptar los selectores del snippet en consecuencia.

Para Divi 4 (la versión clásica), el snippet funciona sin modificaciones en la versión actual del tema. Solo asegúrate de que no tengas otro CSS que esté sobreescribiendo la propiedad overflow del contenedor de imágenes, ya que ese es el conflicto más común que veo cuando el efecto no funciona correctamente.

Combinando el efecto zoom con otras animaciones de Divi

Lo que hace especialmente poderoso este efecto es que no tiene que vivir solo. Puedes combinarlo con las opciones nativas de hover que ofrece el constructor de Divi para crear experiencias interactivas mucho más ricas.

Una combinación que funciona muy bien es activar la opción de "capa superpuesta" (overlay) en el módulo del blog y asignarle un color semitransparente. Cuando el usuario hace hover, la imagen hace zoom mientras el overlay aparece encima con un color de marca. El resultado es sofisticado y completamente construido sin ningún plugin adicional.

También puedes combinar el efecto zoom con las animaciones de scroll que ofrece Divi en su panel de efectos de desplazamiento. Por ejemplo, puedes configurar que los posts del blog aparezcan con un efecto de fade-in mientras el usuario hace scroll, y una vez que la tarjeta está en pantalla, el hover activa el zoom. Esta doble animación crea una experiencia de navegación muy dinámica.

🎓 Si quieres dominar Divi a fondo y aprender a crear efectos avanzados como este, explora los cursos en uxdivi.com/cursos/ donde te enseño desde los fundamentos hasta técnicas de nivel profesional.

Conclusión

El efecto zoom en las imágenes del módulo de blog de Divi es uno de esos pequeños detalles que marcan una gran diferencia en la percepción de calidad de un sitio web. Con apenas cuatro bloques de CSS y sin necesidad de instalar ningún plugin, transformas un módulo de blog estático en uno dinámico e interactivo que invita al usuario a explorar el contenido.

Lo mejor de este enfoque es su flexibilidad. Una vez que entiendes qué hace cada parte del snippet puedes adaptarlo libremente: cambiar la intensidad del zoom, quitar la rotación, ajustar la velocidad de la transición, o limitarlo a módulos específicos usando IDs CSS. Tienes el control total sobre el resultado sin depender de herramientas de terceros.

Si tienes alguna duda sobre cómo implementar este efecto en tu sitio o quieres ver más variantes avanzadas, déjame un comentario aquí abajo. Y si te resultó útil este tutorial, compártelo con otros diseñadores que trabajan con Divi — siempre es bueno hacer crecer la comunidad.

🎓 ¿Quieres ir más allá con el módulo de blog de Divi? En uxdivi.com/cursos/ encontrarás tutoriales completos para dominar cada aspecto del constructor y crear diseños que realmente destaquen.