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 #
- Log in to your WordPress Dashboard.
- Navigate to DiviAnimator → Extensions.
- Locate Image Reveal on Hover.
- Enable the extension.
- 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.
