---
title: "How to Create Image Reveal Effect on Text in Elementor?"
url: https://theplusaddons.com/docs/image-reveal-effect-on-text-in-elementor/
date: 2024-05-15
modified: 2026-06-27
lang: en
author: "Aditya Sharma"
description: "Do you want to add an image reveal effect on text in Elementor? Adding an image reveal effect on text not only adds a touch of creativity to your website..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-Image-Reveal-Effect-on-Text-in-Elementor_-1024x536.jpg
word_count: 427
---

# How to Create Image Reveal Effect on Text in Elementor?

## 

- Utilizes the Advanced Typography widget from The Plus Addons for Elementor to create an image reveal effect on text.
- Enables the On Hover Image Reveal feature by toggling the setting in the Advanced Typography tab.
- Allows customization of image reveal effects through the Style dropdown in the widget settings.

Do you want to add an image reveal effect on text in Elementor? Adding an image reveal effect on text not only adds a touch of creativity to your website but also allows you to highlight important information in a way that stands out.

With the Advanced Typography widget in The Plus Addons for Elementor, you can add an on-hover image reveal effect on text directly in the Elementor editor. When a visitor hovers over the text, an image appears with a stylized reveal animation.

*To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, [click here](https://theplusaddons.com/docs/advanced-typography/).*

**Best Used For:**

- Creative agency and portfolio sites that use large display typography as a design focal point

- Landing pages where a keyword or product name reveals a supporting image on hover to create visual interest

- E-commerce product pages where hovering over a product name shows a product thumbnail

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/)

To do this, add the Advanced Typography widget to the page and follow the steps:

1. In the **Advanced Typography** tab, select **Normal** or **Multiple** from the **Select Option** dropdown. Use **Normal** when you want to apply the image reveal to a single text block. Use **Multiple** when you need different reveal images for separate text segments on the same page.

Let us select **Normal** for this example.

2. Add the text in the **Text** field.

3. Enable the **Enable/Disable** toggle in the **On Hover Image Reveal** tab. This activates the image reveal effect for the specific text you entered. If you also want to add animated text effects, the [Animated Text Heading widget in Elementor](https://theplusaddons.com/docs/animated-text-heading-animation-typing-text-widget/) offers typing and rotating headline animations as a complementary effect.

![Advanced Typography widget On Hover Image Reveal toggle enabled in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-on-hover-image-reveal-enable.gif)

> *Note: In the Multiple option you'll find the On Hover Image Reveal option in each text repeater item.*

4. Upload or select your image from the **Hover Image** section.

From the **Style** dropdown, choose the reveal animation effect you want to apply. Different styles control the direction and motion of the image as it appears on hover. Use this when you want to match the reveal style to your site's overall animation language.

When you hover over the text, it will show the image with the selected reveal effect. To trigger an image reveal animation by scrolling rather than hovering, see [How to Add Image Reveal Animation on Scroll in Elementor](https://theplusaddons.com/docs/add-image-reveal-animation-on-scroll-in-elementor/).

![Advanced Typography On Hover Image Reveal effect demo in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-on-hover-image-reveal-demo.gif)

***Suggested Reading**: [How to Create a Text Mask Effect in Elementor?](https://theplusaddons.com/docs//text-mask-effect-in-elementor/)*