---
title: Image Reveal on Hover
description: The Image Reveal on Hover Extension allows you to display images dynamically when users hover over specific row/section on your page. This creates interactive experiences that help draw attention to important content, showcase products, highlight team members, or add creative…
url: "https://divianimator.com/docs/image-reveal-on-hover/"
updated: "2026-09-08"
category: Divi Extensions
---

# Image Reveal on Hover

The Image Reveal on Hover Extension allows you to display images dynamically when users hover over specific row/section on your page. This creates interactive experiences that help draw attention to important content, showcase products, highlight team members, or add creative visual effects to your Divi website.

## **Requirements**

Before using the Image Reveal on Hover Extension, make sure you have:

- Divi Theme or Divi Builder installed and activated
- DiviAnimator installed and activated
- Image Reveal on Hover Extension enabled

## **How to Enable Image Reveal on Hover**

1. Log in to your WordPress Dashboard.
2. Navigate to **DiviAnimator → Extensions**.
3. Locate **Image Reveal on Hover**.
4. Enable the extension.
5. Save your changes.

Once enabled, the Image Reveal on Hover settings will become available in supported Divi modules.

## **Step 1: Select Your Row/Section**

Choose the Row where you want the image reveal effect to appear.

Supported Row can include:

- Text Modules
- Heading Modules
- Button Modules
- Blurb Modules
- Any supported Divi element

After selecting the element, open the **Image Reveal on Hover** settings and enable the feature.

## **Enable**

# The **Enable**option allows you to on/off **Image Reveal on Hover.**

## **Enable On Editor**

The **Enable On Editor** option allows you to preview the hover effect directly inside the Divi Builder.

### **Enabled**

The hover effect will be visible inside the builder, making it easier to preview and adjust your settings.

### **Disabled**

The effect will only appear on the frontend of your website.

## **Choose Image**

First, choose any image you’d like to appear when hovering over a specific element on your website. Choose any image that fits your design requirements.

## **Image Size**

## **Width**

The **Width** setting controls the width of the revealed image.

Example:

- 300px = Image displays at 300 pixels wide.

You can increase or decrease the value depending on your layout.

## **Height**

The **Height** setting controls the height of the revealed image.

Example:

- 200px = Image displays at 200 pixels high.

Adjust the value as needed to maintain the desired image proportions.

## **Position Controls**

Position settings allow you to control where the revealed image appears relative to the target element.

## **Cursor Offset Y (Px)**

Controls the vertical offset from the top.

Example:

- 30px = The image appears 30 pixels below the top position.

Responsive controls are available for:

- Desktop
- Tablet
- Mobile

## **Cursor Offset X (Px)**

Controls the horizontal offset from the left side.

Example:

- 30px = The image appears 30 pixels from the left position.

Responsive controls are available for:

- Desktop
- Tablet
- Mobile

Adjust these settings to position the image exactly where you want it.

## **Z-Index**

The **Z-Index** setting controls the stacking order of the revealed image.

### **Higher Value**

Displays the image above other overlapping elements.

### **Lower Value**

Places the image behind other elements.

If the revealed image is hidden behind another element, increase the Z-Index value until it appears correctly.

### **Fade Duration**

## **Responsive Controls**

Image Reveal on Hover includes responsive settings that allow you to customize positioning for different screen sizes.

Available devices include:

- Desktop
- Tablet
- Mobile

This ensures your hover effect looks great across all devices.

## **Tips**

- Use high-quality images for the best visual results.
- Keep image dimensions consistent throughout your design.
- Adjust Position Top and Position Left to avoid overlapping important content.
- Use Z-Index when working with layered layouts.
- Preview your effect using Enable On Editor before publishing.

## **Need Help?**

If you need assistance using the Text Animation Extension, please contact the DiviExpand support team via “support@diviexpand.com”.  We're always happy to help.