Image Stack

The Divi Plus Image Stack Module lets you display images in a dynamic, stacked layout that expands on hover, with customizable animations and tooltips. It’s perfect for showcasing team members, social icons, or linked images in an engaging and interactive way.

To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Image Stack.

Content options

In the Content tab, you can add and manage images for your image stack. Just click the “Add New Image” button to upload or select images you want to include.

Display settings

Alignment: Choose how the images are aligned left, center, or right.

Image/Icon Size: Adjust the overall size of each image or icon using the slider.

Image/Icon Shrink: Set how much each image/icon should shrink when stacked.

Image/Icon Spacing: Control the space between each image/icon in the stack.

Enable Tooltip: Toggle this option to show or hide a tooltip when hovering over the images/icons.

Image stack item settings

Once you add an image to the Image Stack module, each image item comes with its own settings.

Under the Content tab, you can:

Title: Add a custom title for the image or icon. This is helpful for tooltips or accessibility.

Use Icon: Toggle this switch if you prefer to use an icon instead of an image.

Image: Click “Add Image” to upload or choose an image from your media library.

Image Alt Text: Enter alternative text for the image, which improves accessibility and SEO.

Design settings

If you’re using an icon instead of an image, you can customize how it looks under the Icon section.

Icon Color: Pick a color for the icon from the preset options or use the color picker to choose your own.

Icon Font Size: Use the slider to adjust the size of the icon.

Tooltip styling

In this section, you can customize how the tooltip appears when a user hovers over an image or icon.

Entrance Animation: Choose how the tooltip appears (e.g., fade, slide, etc.).

Animation Duration: Set how quickly the tooltip animation plays (in milliseconds).

Show Speech Bubble: Turn this on to display the tooltip with a speech bubble style.

Make Interactive Tooltip: Enable this if you want users to be able to interact with the tooltip (e.g., click links inside it).

Tooltip Width: Adjust the width of the tooltip using the slider.

Tooltip text

This section allows you to style the text that appears inside your tooltip.

Tooltip Title Font: Choose a font style for your tooltip title.

Tooltip Title Font Weight: Set how bold the tooltip text appears (e.g., light, regular, bold).

Tooltip Title Font Style: Use options to make the text italic, bold, underlined, etc.

Tooltip Title Text Color: Pick a color for the tooltip text from preset options or customize your own.

Tooltip Title Text Size: Adjust the size of the text using the slider.

Tooltip Title Letter Spacing: Add space between each letter to improve readability or design appeal.