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.
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.
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 offers typing and rotating headline animations as a complementary effect.
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.
Suggested Reading: How to Create a Text Mask Effect in Elementor?
