Source: https://divicake.com/blog/creating-a-hover-reveal-effect-for-divi-blurb/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # Creating an Eye-Catching Hover Reveal Effect for the Divi Blurb Module By Divi Cake·24 November 2023·Updated 25 March 2024·3 min read Creating an Eye-Catching Hover Reveal Effect for the Divi Blurb Module We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [First Step: Add A Custom CSS Class To The Divi Blurb Module](https://divicake.com#first-step-add-a-custom-css-class-to-the-divi-blurb-module) - [2nd Step: Implement Design Modifications](https://divicake.com#2nd-step-implement-design-modifications) - [3rd Step: Adding The CSS Snippet For The Hover Effect](https://divicake.com#3rd-step-adding-the-css-snippet-for-the-hover-effect) - [Default Blurb Module](https://divicake.com#default-blurb-module) - [Divi Blurb Module After Adding Hover Effect](https://divicake.com#divi-blurb-module-after-adding-hover-effect) - [Conclusion:](https://divicake.com#conclusion) Diving into the world of [Divi](https://divicake.com/go/divi/), you’ll quickly discover that the Divi Blurb module is a real crowd-pleaser. Its versatility knows no bounds, and if you’ve been exploring our blog, you’ll know we’ve got a treasure trove of [Divi Blurb Module](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/) tutorials waiting for you. Now, in this guide, we’re about to unleash some style and user-friendly magic as we take your Blurb modules to the next level with a captivating hover effect. ## First Step: Add A Custom CSS Class To The Divi Blurb Module To begin, place the [Divi Blurb module](https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome/) in your layout and add an image, a title, and some text. Now, go to the Blurb module settings and open the Advanced tab. Look for the CSS ID & Classes option, and toggle it. In the CSS Class input field, type in “hover-blurb”. This step is important because it helps us focus our special styling on just this module, making everything much easier to manage. For reference please follow the image below: Adding a CSS Class to Divi Blurb Module is important because it helps us focus our special styling on this specific module. Adding a CSS Class to Divi Blurb Module ## 2nd Step: Implement Design Modifications Once you’ve placed your image and text, it’s your turn to make your [Blurb module](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/) look just the way you want. If you’re aiming for a specific look, like the one you’ve seen in our example, and want to apply some CSS style, here’s what you need to do: - Add an image that fits your content. - Make sure the text is right in the middle for a neat appearance. - Give your image a subtle rounded edge by adding a 15px border radius. Point to remember: If your image is wider than it is tall (horizontal), you might need to adjust the text. You could make the title text a bit smaller and shorten the body text to make everything look just right. Read More: [A Simple Guide to Creating a One-Page Website with Divi](https://divicake.com/blog/one-page-website-guide/) ## 3rd Step: Adding The CSS Snippet For The Hover Effect Now, let’s dive into the exciting part! You can easily incorporate the [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) code snippet provided below into your website. If you’re using our free [Divi child theme](https://divicake.com/blog/how-to-create-a-child-theme-for-your-divi-website/), simply insert this snippet into the style.css file. But, if you’re not using the child theme, don’t worry. You can still add this code by going to Divi > Theme Options > Custom CSS code box. [Copy the CSS Code Snippets from here](https://drive.google.com/file/d/1Mg-L3UUj7NRiOmQ8srNecVDXSDSpza3o/view?usp=sharing) Read More: [How to Rearrange the Divi Blurb Module: Placing the Title Above the Image](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/) ## Default Blurb Module The standard Divi Blurb Module lacks a built-in hover reveal effect. Default Divi Blurb Module ## Divi Blurb Module After Adding Hover Effect Eye-catching hover reveal effect for the Divi Blurb module Hover Reveal Effect ## Conclusion: As we wrap up our journey into creating an eye-catching [hover](https://divicake.com/blog/add-hover-effects-to-divi/) reveal effect for the Divi Blurb module, we hope you’re feeling inspired and empowered to take your web design skills to the next level. The Divi Blurb module is indeed a versatile tool, and with a touch of CSS magic, you can transform it into something truly captivating. In just three simple steps, we’ve shown you how to add this beautiful hover effect, and it all starts with customizing your [Blurb module](https://divicake.com/blog/how-to-rearrange-divi-blurb-module/) and adding a CSS class to make it unique. From there, you have the creative freedom to design your module with an image, centered text, and a subtle border radius, ensuring your content looks just the way you envision it. The icing on the cake is the [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) snippet that makes the magic happen. Whether you’re using a Divi child theme or the Theme Options, we’ve made it easy for you to add this snippet and watch your Blurb module come to life with a stunning hover reveal effect. We’re thrilled to have been your guide on this journey, and we’d love to hear your thoughts and see the fantastic results you achieve. Share your feedback in the comments below, and if you found this post valuable, don’t forget to subscribe because we have a wealth of exciting tutorials in the pipeline, waiting to enhance your web design skills. Thanks for joining us, and happy designing! Read More: [Replace the Divi Blurb Icon With a Font Awesome Icon: A Step-by-step Guide](https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)