Hover Gallery

Meet the Divi Sensei Hover Gallery module for Divi! Build an interactive gallery of expanding panels — visitors hover (or click) an item and it grows to reveal its title, description and button while the other panels gracefully shrink aside. A show-stopping way to present services, projects or team members.

View Demo →

With the Hover Gallery module you can:

1. Add any number of gallery items, each with its own background image, icon or thumbnail, title, body text and button
2. Expand items on hover or on click
3. Reveal the item content with one of 8 animations — fades, zooms and a slice effect
4. Let Autoplay cycle through the items automatically, with a progress bar indicator
5. Style the default and active state of every element separately — item, image, text and button
6. Control the grid precisely — columns, gap, width, height and alignment

How the module works

The Hover Gallery is a parent/child module. The parent module controls the grid, the activation behavior and the shared styling; each child item is one expanding panel. Every element has two looks: the default state (collapsed panel) and the active state (expanded panel) — styled in matching group pairs like Item Style and Item Style Active.

How to add the Hover Gallery module

1. Open a page with the Divi Visual Builder
2. Click the + (Add New Module) button
3. Search for Hover Gallery and click it to insert the module
4. Add a child item for every gallery panel and fill in its content

Grid Settings

The parent module’s Grid Settings group controls the layout and behavior:

1. Columns — how many panels the gallery shows (1–6, default 3)
2. Grid Gap — the space between panels (default 20px)
3. Grid Width / Grid Full Height — the gallery’s size within the page
4. Grid Alignment — position the grid within the module
5. Activate on click — expand items on click instead of hover; handy for touch-heavy audiences
6. Animation — how the item content appears when a panel expands: FadeIn, FadeUp, FadeDown, FadeRight, FadeLeft, ZoomIn, ZoomInZoomOut or the SliceAnim effect, with an adjustable Animation Speed (0–2000ms)

Autoplay & Progress Bar

The gallery can present itself: with Autoplay enabled, the module expands the items one after another in a loop — great for hero sections and showcases that should keep moving on their own.

1. Autoplay — enable the automatic item rotation
2. Autoplay Speed — how long each item stays expanded before the next one opens (100–10000ms)
3. Show Progress Bar — display a progress bar that fills up before the next switch, so visitors can see when the gallery is about to move on

With Show Progress Bar enabled, a dedicated Progress Bar group appears in the Design tab:

1. Progress Bar Color — the color of the bar track on inactive items
2. Active Progress Bar Color — the fill color on the active item
3. Progress Bar Weight — the bar thickness
4. Progress Bar Position — attach the bar to the top, bottom, left or right edge

Gallery Items

Each child item is one panel, configured in its own settings modal:

1. Image — the panel’s background image with Image Alt Text
2. Content — an optional icon (with Use icon) or thumbnail image, the Title, the Body Text shown when the panel expands, and an optional button (Use Button, with text, URL and link target)
3. Alignment — the Horizontal and Vertical alignment of the content inside the panel
4. Link — make the whole panel a link

Design Settings

Every content element has a default and an active styling group, so the collapsed and the expanded panel can look completely different:

1. Item Style / Item Style Active — the panel itself: background, overlay, border and shadow in both states
2. Content Text / Content Text Active — typography for title and body in both states
3. Content Image & Icon / Content Image & Icon Active — icon or thumbnail styling in both states; enable Enable Active Icon/Image Style to unlock the active variant
4. Button / Active Button — full button styling in both states
5. Progress Bar — the autoplay indicator described above

Global vs. per-item styling

The parent module’s design groups style all items at once — the fastest way to a consistent gallery. Each child item repeats the same groups, so a single panel can override the global look — for example a different overlay color per project. A practical workflow: style the first item, then duplicate it for the remaining panels and only swap the content.

NOTE: If the gallery is not displayed correctly on the front-end, clear the Static CSS Files in Divi → Theme Options → Builder → Advanced — even if that option appears disabled.

Design Ideas

1. Services showcase — 4 columns, icons + titles visible when collapsed, description and a “Learn more” button revealed on hover.
2. Self-playing portfolio — Autoplay at 4000ms with the progress bar on the bottom edge; each panel links to a project page.
3. Team gallery — portrait background images, Activate on click, bios and profile buttons in the expanded state.