Divi Theme: You Won't Believe How Easy It Is to Make Divi Blurb Icons Spin!

Unlock the potential of your Divi theme by learning how to create a spinning icon on hover for your blurb module using the free form CSS tab and a CSS animation. In this step-by-step tutorial, we'll guide you through the process of adding dynamic, eye-catching effects to your website, making it stand out from the competition. Whether you're a beginner or an experienced web designer, this video will show you how to leverage the power of Divi and CSS to create interactive and engaging elements that will captivate your audience.
In this video, we'll cover everything from accessing the free form CSS tab in the Divi theme to writing and implementing the CSS animation code. You'll see how easy it is to add a professional touch to your blurb modules with just a few lines of code. This tutorial is perfect for anyone looking to enhance their website's user experience with stunning visual effects. Don't miss out on this opportunity to elevate your web design skills and make your Divi blurb modules truly unique. Watch now and start transforming your website today!
Try out the Divi theme: bit.ly/TryDiviNow
Divi Supreme Modules Pro Plugin 10% Off: divisupreme.co...
Divi Supreme Modules Light Plugin: bit.ly/Supreme...
AI Images generated by Nightcafe:creator.nightc...?fpr=jamie25
Use promo code SYSTEM22 for 15% discount
MY KZbin PLAYLISTS:
Divi For Beginners Playlist: • Divi For Beginners
Divi Supreme Modules Playlist: / watch
v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: / system22net
Full Ecommerce Site Build Playlist: / watch
v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: • Divi Theme Contact For...
Divi 4 Theme Add A responsive Search Bar to your header
Check out our playlist page for more videos on this: / system22net
Don't forget to drop any questions below, I will do my best to answer or make a video demo for you!
Sub: / @system22
MY BLOG
web-design-and...
CODE USED TODAY
selector:hover .et_pb_main_blurb_image {
animation: icspn 3s infinite linear;
}
@keyframes icspn {
0% {transform:rotatey(360deg); }
100% {transform:rotatey(0deg);}
}
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
Disclaimer: Some of these links are affiliate links where I'll earn a small commission if you make a purchase at no additional cost to you.
#DiviTheme #CSSAnimation #WebDesign #HoverEffect #DiviTutorial #BlurbModule #InteractiveIcons

[@System22]

Check out our playlist page for more videos on this: kzbin.infoplaylists Don't forget to drop any questions below, I will do my best to answer or make a video demo for you! Sub: kzbin.info/door/Yeyetu9B2QYrHAjJ5umN1Q

[@Maddl293]

Very helpful video, as always! Is there already a tutorial on how to change the color of a blurb icon on scroll? ☺

[@System22]

Not yet!

[@RichArtLove]

This is a nice touch! Question; what could be added to this CSS code to make hover effect instant? As it is the animation on hover seems to have a minor delay. Advice? Thanks!

[@System22]

Might try starting your animation from 10 - 15 degrees not 0

[@RichArtLove]

@@System22 Thanks! Cheers!

[@RichArtLove]

@@System22 Hi Mate - Simple Question - What Would Be The Best Simple Revision Of This Code, To Reverse Your Clever Effect - So As To Have The Icon Automatically Rotating By Default, And Then Either Stopping On Hover (Or Always Rotating)? Cheers!