The default Divi overlay colour (for images, shop product tiles, etc.) is a semi-transparent white that washes out your images. You can change these settings globally for each module in the Module Customizer, or individually in each module’s design settings.

But with some sites, it saves a lot of time to globally set & override these overlays with some CSS. It’s also an easy way to know your site overlays are consistent.

To set your sitewide overlay hover colour in Divi, use the following CSS snippet, changing the colour to that which your heart (site) desires:

/* Default Overlay Color */
.et_overlay {
    background: rgba(0, 0, 0, 0.15) !important;
}

Where to paste the CSS snippet

Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS” box and save changes.

Child Themes

We recommend using a child theme. It is your insurance against losing your custom work in updates. Click here for instructions on adding a basic Divi child theme with a stylesheet (for custom CSS). Click here to learn more about child themes and getting the most out of the Divi theme.