Interactive image overlays for Divi Builder
Divi Overlay Images Pro adds an Overlay Image module to the Divi Builder, giving you a practical way to place text over images and create interactive visual effects. The overlay text can appear when visitors hover over an image, helping you present supporting information, labels, calls to action, or other content without separating the image and text into different design elements.
The module is designed for use with Divi’s visual builder, so you can customize the overlay as part of your existing page-building workflow. Overlay style settings help you adjust the appearance to match the design of your website.
Choose an overlay effect
The module includes four overlay effects for controlling how the text appears:
- Fade: gradually reveals the overlay text with a fade-in transition.
- Slide: introduces the text with a smooth sliding animation.
- Zoom: highlights the text with a subtle zooming effect.
- Always: keeps the overlay visible on top of the image.
You can control the transition duration to fine-tune the timing of the selected effect. When using the Slide effect, you can also choose the animation direction: Top, Bottom, Left, or Right. These settings let you adapt the interaction to different image layouts and design intentions.
Pro features for richer overlays
The Pro edition adds tools for making overlay content more useful and visually distinctive. You can add a button alongside the overlay text, creating a direct interaction point within the image treatment. Button styles provide additional control over the button’s appearance so it can fit the surrounding design.
You can also add an icon alongside the overlay text. Icon styles let you tailor the icon’s look and feel to align with your website’s visual direction. Used together, text, buttons, and icons can help distinguish different image-based sections and give visitors clearer visual cues.
Practical use cases
Use the module for image-based navigation, featured content, service presentations, portfolio layouts, product-related sections, or other areas where information needs to appear directly over imagery. The available effects make it possible to keep text visible, reveal it on hover, or add movement that draws attention to selected content.
Installation and access
After you activate the plugin, the Overlay Image module should appear in the Divi Builder module list. Open the module in Divi’s visual builder, add your image and overlay content, then select an effect and adjust its settings. For a Slide effect, choose the direction and set the transition duration. Add a button or icon when needed, then customize the available button, icon, and overlay style settings before publishing your layout.
