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

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:

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Í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.

Artículos relacionados

Comentarios

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →