A reveal animation hides an image behind a block of colour and wipes that colour away as the visitor scrolls down to it, so the picture arrives rather than simply being there.
The Creative Image widget does this with a second image style called Scroll Reveal Image. You choose the colour of the wipe and the direction it travels, and that is the whole setup.
To check the complete feature overview documentation of The Plus Addons for Elementor Creative Image widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Creative Image is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Creative Image, switched on under The Plus Addons > Widgets (in the Advanced group there). In the Elementor panel it appears under Plus Advanced.
- You need an image: pick one in Choose Image first. With nothing chosen the widget renders the plugin’s own grey placeholder, so none of the effects below will look like anything.
- The image needs to be below the fold: the reveal fires when the widget scrolls into view, so put it far enough down the page that the visitor has to scroll.
Set Up the Reveal
- Add the Creative Image widget to the page.
- In the Content section set Image Style to Scroll Reveal Image.
- Choose your picture in Choose Image.
- Set Animated Background Color to the colour of the wipe.
- Pick a direction in Animation Direction.
The Two Settings
| Setting | What it does | Default |
|---|---|---|
| Animated Background Color | The colour of the panel that covers the image and then slides away. Leave it empty and the wipe still happens, in a plain light grey. | empty |
| Animation Direction | Which way the covering panel travels off the image: Left, Right, Top or Bottom. | Left |
Pick a colour that belongs to your palette — a brand colour or the section’s own background reads far better than the default grey, because the panel is on screen for the whole of the wipe.
How It Behaves
- The reveal fires when the widget is about 90% of the way down the viewport, on the published page.
- It runs once. Scrolling back up and down again does not replay it, by design — a reveal that repeats on every pass quickly becomes annoying.
- The picture is painted as a background at full size, so it always fills its container neatly whatever aspect ratio you upload.
Limitations
- Image Resolution does nothing in this style. The full-size file is always used, so resize large originals before uploading rather than relying on a smaller registered size.
- Max Width Image is ignored. The control is only wired up for the Creative Image style. Size the container instead.
- Mask Image Shape and Super Parallax are not available here. Both switches disappear when you pick Scroll Reveal Image, and any values you set before switching style are ignored.
- The image is a background, not an
<img>tag, so its alt text is not carried on to the page. Don’t use this style for a picture that has to be described to a screen reader.
Troubleshooting
The overlay is grey instead of my colour
Animated Background Color is empty. Set a colour — the grey is the stylesheet’s fallback, not a deliberate default.
The reveal never runs
View the published page, not the editor, and make sure the widget starts below the fold. If it is already on screen when the page loads there is no scroll to trigger it.
It only plays the first time
That is intended. The animation is set to trigger once per page load.
The Mask Image Shape switch disappeared
Masking belongs to the Creative Image style. Switch Image Style back if you need a custom image mask.
