Divi 5 Blurb Animations Tutorial – Zoom Hover & Spinning Icon Effects
Divi 5 gives designers incredible control over layout and styling, but when you combine it with a little custom CSS, you unlock even more powerful design possibilities. One of the easiest and most impactful modules to enhance with animation is the Blurb Module.
The Blurb Module is commonly used to display services, features, or highlighted content with an image or icon and supporting text. While it already offers strong styling controls, adding subtle animation can dramatically increase visual engagement.
In this tutorial, we demonstrate two highly effective animations that can be added using just a small amount of CSS. These animations require no plugin and integrate seamlessly with Divi 5’s visual builder.
The first animation is a smooth zoom-in hover effect applied to the blurb image. When a user hovers over the module, the image gently scales up, creating a dynamic and modern interaction.
This zoom effect works particularly well for service sections, portfolios, and feature highlights. It makes your design feel interactive without being overwhelming.
To achieve this, we use Divi’s Advanced CSS tab and target the appropriate image container class. Using transform and transition properties, we create a smooth scaling effect.
The second animation is a continuously spinning icon effect. Instead of rotating only on hover, this animation runs indefinitely using a CSS keyframes animation.
This technique is excellent for drawing attention to feature icons or adding subtle movement to your page layout.
A critical part of implementing these effects properly is identifying the correct class names inside the module. In the tutorial, we use Chrome Inspector to locate the hidden class selectors Divi assigns to blurb images and icons.
Learning how to use Chrome Inspector is an essential skill for any web designer. It allows you to examine elements on the page and identify exactly which classes to target with CSS.
Once you understand how to inspect elements and apply CSS inside Divi’s Advanced tab, you gain the ability to customize virtually any module.
The beauty of this approach is flexibility. You can adjust animation speed, scaling intensity, easing curves, and rotation timing to match your design style.
Because these animations are handled with lightweight CSS, they do not significantly impact page performance when implemented correctly.
Interactive animations like these increase engagement and make your site feel polished and professional.
Divi 5 continues to provide the foundation for creative layouts, and combining its visual builder with simple CSS techniques gives you even more control.
If you want to elevate your Blurb Modules and create modern interactive effects without relying on third-party plugins, these two animations are a perfect place to start.
Try out the Divi theme:
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=33651
Divi 5 Playlist:
https://www.youtube.com/playlist?list=PLqabIl8dx2wrUbEebdYhvi9W7TF2zh-De
Divi Ultimate Guide For Getting Started:
https://www.youtube.com/playlist?list=PLqabIl8dx2woKN3MwcKmb0cNW9b-SubTU
Divi 5 For Beginners:
https://www.youtube.com/playlist?list=PLqabIl8dx2wpTPJVF5ebgkOmcbd8QsUZP
Divi Supreme Modules Pro Plugin 10% Off:
https://divisupreme.com/system22/?ref=6
Divi Supreme Modules Light Plugin:
https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist:
https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this:
https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist:
https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video:
https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour:
https://youtu.be/qP-ViPakoSw
Sub:
https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Latest YouTube Videos
