The Divi Blurb module offers a wide range of customizable features and versatility, enabling users to effortlessly create visually stunning combinations of text and images. With the added benefit of interactive elements such as animations and hover effects, the Blurb module is sure to captivate your visitors.
The Divi blurb module also has a transform option that enables you to create distinctive and eye-catching designs by changing the module’s shape. Additionally, by combining the transform option with hover effects, you can create visually stunning effects that will leave a lasting impression on your website visitors.
Keep in mind that the default hover effect for the ‘transform’ option applies to the entire module, not just the image. If you want to add a hover effect specifically to the image, this tutorial will guide you through adding it to either a particular blurb module image or to all blurb images across the website.
Adding Hover Effect on Blurb Module Image
Add Hover Effect on Particular Blurb Module
Adding an effect on a particular blurb module is very easy. You just need to add a CSS snippet to the Blurb Image custom CSS of your desired blurb module. For this tutorial, let’s try rotating the image a bit on hover.
Start by going to the desired blurb module on the Divi Builder to open up the Blurb Settings. And then navigate to the Advanced tab → Custom CSS block → Blurb Image to place the following CSS snippet in the Hover option editor.
transform: rotate(0.5turn);
After you’ve placed the CSS snippet, the image immediately rotates so you can adjust the value of the turn as you fit. Apply your changes when you’re satisfied with the result.
In addition to using transform effects, CSS filters can also be applied to create a hover effect on your blurb module image. One option is to add a grayscale effect to the image by adding the following CSS snippet in a new line.
filter: grayscale(50%);
Now, your blurb module image will rotate and have a grayscale filter whenever the visitor cursor hovers above them.
You can always save this module as a template for your future content on Divi cloud so you can access it from all your Divi sites.
Add Hover Effect Across the Website
If you already have many blurb modules already placed across your website and you want to add hover effects to the image, then you may want to use the following method for it. Let’s try adding rotate and grayscale effects like the first method.
Step 1: Add a Custom CSS Class
First, go to the desired blurb module on the Divi builder to open up the Blurb Settings. And then navigate to the Advanced tab → CSS ID & Classes block to add the imghover custom CSS class.
Repeat the step above for all the blurb modules you want to apply the effect for.
Step 2: Add Custom CSS Snippets
Once you’ve added the CSS Class to the module, the next step is to add custom CSS snippets to add rotating and grayscaling effects on the blurb’s module image. To do so, from your WordPress admin dashboard, navigate to Divi → Theme Options and place the following custom CSS snippets in the Custom CSS editor then click the Save Changes button to apply the changes.
.imghover img:hover {
transform: rotate(0.03turn);
filter: grayscale(50%);
}
Now, all the blurb modules with the imghover CSS class will rotate a bit and turn grayscale when you move your cursor above them.
The Bottom Line
With Divi’s blurb module, you can create visually stunning combinations of text and images. And if combined with interactive elements such as animations and hover effects, the Blurb module is sure to captivate your visitors. However, if you want to add an effect only to the image, you may need to add some CSS snippets to do so. This tutorial shows how to add a hover effect to the blurb module image.
