Divi Theme Blog Image Zoom And Contain 👈 👈 👍

Divi Theme how to create zooming images on hover for your blog using the Divi Blog Module. Today we will be demonstrating how to customize your blog post images by crerating a hover effect. When the mouse moves over the featured image, it will grow to twice the size, but remain contained in the blog post card, creating a zoom effect.
There is a little bit of coding involved today to build this feature. Don't let the CSS coding put you off, it is very easy, and any code I write today I will paste below the video for you to use as you wish. You are welcome to copy the code and paste it into your website. CSS is a great thing to learn, so I encourage you to try out some of your own ideas to get familiar with it. You can't break your site with CSS, if something doesn't work simply delete the code to return back to how the site was previously.
We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.
So, follow along with the video and see how to create custom blog posts with the Divi theme builder using the Divi theme.
For more information on the Divi theme, check out our Divi playlists below.
Playlist page for more videos on this: / system22net
Divi Supreme Modules Playlist: / watch
v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Full Ecommerce Site Build Playlist: / watch
v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: • Divi 4 Add A Contact F...
Divi 4 Theme Create An Ecommerce Store In One Hour: • Divi 4 Theme Create An...
Try out the Divi theme: bit.ly/TryDiviNow
Divi Supreme Modules Plugin 10% Off: bit.ly/DiviSup...
Divi Brain Addons Free Plugin: brainaddons.com/
My Blog : web-design-and...
Check out our playlist page for more videos on this: / system22net
--------- CSS CODE USED TODAY ---------
/* Blog Image Zoom */
.et_pb_post .entry-featured-image-url {
overflow: hidden;
}
.et_pb_post a img:hover {
transform:scale(2);
}
.et_pb_post a img {
transition-duration: 1s;
}
--------- RECOMMENDED PLAYLISTS ---------
Elementor Ecommerce Store: • Elementor Ecommerce St...
Divi Snippets: • Divi 4 Snippets Divi T...
Divi 4 Ecommerce Store: • Divi 4 Ecommerce Store...
Bootstrap 4 Basics: • Bootstrap 4 Basics Ind...
Elementor: • Elementor Wordpress Bu...
WordPress Tips: • Wordpress 2020 Theme C...
Subscribe: / @system22
#UA-camTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite