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