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

Inicio / Blog / Divi Blog Magazine / Imagen con efecto zoom en el módulo de blog de Divi

Autor: Jefferson M

Publicación: 21 Jul, 2021

En este tutorial gratuito te mostraremos como hacer que la imagen del módulo de blog en Divi tenga un efecto zoom rotativo o con un degradado bastante chulo cuando un usuario pase el mouse sobre ella.

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:

Índice

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:

¿Te ha servido el tutorial? Nos ayudaría mucho que puedas compartirlo en tus redes sociales. Y si tienes alguna duda recuerda que tienes acá abajo la caja de comentarios para poder ayudarte.

Nos vemos en el próximo tutorial.

2 Comentarios

  1. Noelia

    Gracias por el contenido! Genial como siempre. Yo tendria una pregunta.. Se podría aplicar tambien en caso de mostrar el contenido a ancho completo?
    Gracias por tu ayuda

    Responder
    • Jefferson M

      Claro que si, ya solo sería que uses una fila de una sola columna y acomodes los anchos para que se vea de ancho completo.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

8 + 14 =