---
title: "Divi Hover Box"
url: "https://divipeople.com/docs/divi-hover-box-doc.md"
canonical: "https://divipeople.com/docs/divi-hover-box-doc/"
published: "2026-07-13"
modified: "2026-07-13"
author: "Fahim Reza"
tags:
  - "divi-conkit-pro"
---

# Divi Hover Box

**Hover Box** is part of **Divi Conkit Pro**. It swaps a background image and overlay content on hover using one of several content and background animation styles — a lightweight way to add interactivity to a feature or category tile.

## Key Features

- **Independent content and background animations** — Tilt, Fade, Slide, or Blend styles for content; Zoom or Slide for the background.
- **Show overlay Always or on Hover.**
- **Flexible content placement** — horizontal and vertical position, including Top/Bottom anchoring.
- **Adjustable animation speed** and box height.

## Adding the Module

1. Edit a page with the Divi Visual Builder.
2. Add a new module and search for **Hover Box**.
3. Add a title, subtitle, and description, then choose a Content Hover Animation and Background Hover Animation.

## Content Settings

- **Content Hover Animation** — None, Tilt Effect, Fade In/Out, Slide in/out Top/Bottom, or Blend styles.
- **Background Hover Animation** — Zoom In/Out, Slide Left/Right.
- **Background Hover Overlay** — Show Always or Show on Hover.
- **Content Alignment / Placement** — Left, Center, Right, and vertical Top/Bottom anchoring.

## Design Settings

- **Box** — Height and background image styling.
- **Content** — Width, Padding, and Title/Subtitle Margin.
- **Title, Sub Title, Description** — independent typography for each text element.

> **Category tile pattern**
> Use a plain background image with Show Overlay on Hover, and Content Hover Animation set to Fade In — this reads as a clean image grid that reveals a label only on interaction.

## FAQ

### Does it work with Divi 5?

Yes. Native Divi 5 module with full Divi 4 support — your license covers both.

### Does it work on touch devices?

Yes — on mobile, the hover state triggers on tap.

### Where can I see it in action?

Visit the [Hover Box module page](https://divipeople.com/modules/hover-box/) for a live overview and pricing.