The Divi Blurb Module is a versatile tool for displaying text alongside icons or images. While Divi's visual builder allows for basic styling, adding custom hover effects with CSS can make your Blurb Modules stand out and improve user interaction. In this article, we’ll explore how to add subtle yet stylish hover effects to your Divi Blurb Modules using only CSS.

Why Add Hover Effects to Blurb Modules?

Hover effects enhance the user experience by providing interactivity and visual feedback. Benefits include:

  1. Improved Engagement: Users notice and interact more with elements that respond to their actions.

  2. Visual Appeal: Subtle animations make your site look modern and professional.

  3. Customization: Stand out from standard designs with unique effects.

Custom Blurb Hover Effect: Icon Scaling with Background Animation

Goal

We’ll create a hover effect where the Blurb icon scales up slightly, and the background color changes smoothly for a polished look.

Step 1: Add a Custom Class in Divi

  1. Open the Divi Visual Builder and add a Blurb Module.

  2. Under Advanced > CSS Class, add the custom class custom-blurb.

Step 2: Add the Custom CSS

Here’s the CSS to achieve the hover effect:

/* Custom Blurb Styling */
.custom-blurb .et_pb_main_blurb_image {
    position: relative;
    transition: transform 0.3s ease;
}

/* Hover Effect: Icon Scaling */
.custom-blurb:hover .et_pb_main_blurb_image {
    transform: scale(1.1);
}

/* Background Animation */
.custom-blurb .et_pb_blurb_content {
    position: relative;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.custom-blurb:hover .et_pb_blurb_content {
    background-color: #007bff;
    color: #fff;
}

/* Text and Icon Color on Hover */
.custom-blurb:hover .et_pb_main_blurb_image img,
.custom-blurb:hover .et_pb_blurb_description {
    color: #fff;
    transition: color 0.3s ease;
}

How It Works

  1. Custom Class: The custom-blurb class targets the Blurb Module.

  2. Icon Scaling:

    • The .et_pb_main_blurb_image is scaled using transform: scale(1.1) on hover.

    • A transition ensures the scaling is smooth.

  3. Background Animation:

    • The background color changes using transition when hovering over the .et_pb_blurb_content container.

    • The rounded corners (border-radius) give a clean and modern look.

  4. Text and Icon Color:

    • The text and icon colors transition to white for better contrast when the background changes.

Step 3: Add the CSS to Divi

  1. Go to Divi Theme Options > General > Custom CSS and paste the CSS code.

  2. Alternatively, add the code to your child theme’s style.css file.

Example Result

When you hover over the Blurb Module:

  • The icon smoothly scales up.

  • The background color transitions to blue.

  • The text and icon colors change to white for contrast.

This effect draws attention to the Blurb Module while maintaining a clean and professional design.

Customization Options

You can customize the snippet to match your design:

  • Background Color: Change #007bff to your preferred hover color.
  • Text and Icon Color: Adjust color: #fff for different hover states.
  • Scaling Effect: Modify scale(1.1) for more or less emphasis.
  • Animation Speed: Adjust 0.3s in the transition property for faster or slower animations.

With just a few lines of CSS, you can add engaging hover effects to Divi Blurb Modules. This subtle interactivity not only enhances the user experience but also makes your site visually appealing. Try out this snippet on your next Divi project and watch your designs come to life!