Plugins / Image Reveal / Docs

Beaver Builder add-onUltimate Image Reveal

Ultimate Image Reveal documentation

Set up, use and fix Image Reveal.

Every setting, plus the changelog.

  • v0.1.3.2
  • WordPress 5.0+
  • PHP 7.4+
Back to Image Reveal
See the changelog

On this page

  1. Install the plugin
  2. Add your first reveal
  3. Settings: images and mode
  4. Settings: brush
  5. Settings: spotlight animation
  6. Settings: progress indicator
  7. Settings: reset button
  8. Settings: completion
  9. How each reveal mode works
  10. Mobile, touch, and accessibility
  11. Performance notes
  12. Troubleshooting
  13. Changelog

This page shows you how to install Ultimate Image Reveal and add a scratch-off or hover reveal to any Beaver Builder row or column. It also explains every setting, how the effect works on phones, and how to fix common problems.

Requirements: WordPress 5.0 or higher, PHP 7.4 or higher, Beaver Builder plugin, installed and active. Current version: 0.1.3.2.

Install the plugin

The plugin is free and includes every feature. You need Beaver Builder installed and active first.

  1. Download the plugin zip file from ishouldbeyourwpguy.com. Do not unzip it.
  2. In your WordPress dashboard, go to Plugins > Add New Plugin.
  3. Click Upload Plugin at the top of the page.
  4. Click Choose File and pick the zip file you downloaded.
  5. Click Install Now.
  6. Click Activate Plugin.
  7. Look for the new Image Reveal item in your admin menu. It has a short getting started guide. If Beaver Builder is not active, you will see a warning there and at the top of your dashboard.

Add your first reveal

The reveal sits behind your row or column content, like a background. You can put headings, text, and buttons on top of it.

  1. Open the page in Beaver Builder.
  2. Click the wrench icon on a row or a column to open its settings.
  3. Go to the Style tab.
  4. Scroll down and open the Image Reveal Background section. It starts closed.
  5. Set Enable Image Reveal to Yes.
  6. Pick a Bottom Image (Revealed). This is the image people uncover.
  7. Pick a Top Image (Overlay). This is the image people see first and wipe away.
  8. Choose a Reveal Mode: Scratch Off (Click & Drag) or Hover Reveal (Mouse Follow).
  9. Pick a Brush Shape and a Brush Size.
  10. Make sure the row or column has height. Add content, or set Height to Minimum Height in the row settings.
  11. Click Done, then Publish.
  12. View the live page to try the effect. In the editor you only see the top image as a plain background.

Settings: images and mode

All settings are in the Image Reveal Background section on the Style tab of a row or column. Most fields only appear after you set Enable Image Reveal to Yes.

Enable Image Reveal
Turns the reveal on or off for this row or column. Default is No.
Bottom Image (Revealed)
The image that shows as people interact. Required.
Top Image (Overlay)
The image that covers the bottom image and gets scratched or lit away. Required.
Reveal Mode
Scratch Off (Click & Drag) or Hover Reveal (Mouse Follow). Default is Hover Reveal. Some fields below only show for one mode.

Settings: brush

Brush Shape
The shape of the scratch or spotlight. Choose Circle, Square, Triangle, Diamond, Hexagon, Pentagon, Star, Heart, or Cross. Default is Circle.
Brush Size
How big the brush is, from 10 to 200 px. Default is 50 px.
Spotlight Edge Style
Hover mode only. Hard Edge (Sharp Cutoff) or Soft Edge (Feathered/Blurred). Default is Hard Edge.
Feather Amount
Shows when you pick Soft Edge. Sets how soft the edge is, from 5 to 100 px. Higher is softer. Default is 20 px.

Settings: spotlight animation

Spotlight Animation works in both modes. Each choice shows its own extra fields.

Spotlight Animation
None, Pulse (Size), Rotate, Glow Breathing, Trail Effect, or Color Tint Cycle. Default is None.
Pulse Speed
Pulse only. Slow (2 seconds), Medium (1 second), or Fast (0.5 seconds). Default is Medium.
Minimum Size
Pulse only. Smallest brush size during the pulse, as a percent of Brush Size. 50 to 100 percent. Default is 80 percent.
Maximum Size
Pulse only. Largest brush size during the pulse. 100 to 200 percent. Default is 120 percent.
Rotation Speed
Rotate only. Slow (4 seconds/rotation), Medium (2 seconds/rotation), or Fast (1 second/rotation). Default is Medium.
Rotation Direction
Rotate only. Clockwise or Counter-Clockwise. Default is Clockwise.
Glow Speed
Glow Breathing only. Slow (3 seconds), Medium (1.5 seconds), or Fast (0.75 seconds). Default is Medium. Works best with Soft Edge.
Minimum Glow
Glow Breathing only. Smallest edge softness during the glow, 0 to 50 px. Default is 10 px.
Maximum Glow
Glow Breathing only. Largest edge softness during the glow, 20 to 150 px. Default is 50 px.
Trail Length
Trail Effect only. How many trail copies follow the brush, 3 to 10. Default is 5.
Trail Fade Speed
Trail Effect only. Slow Fade, Medium Fade, or Fast Fade. Default is Medium Fade.
First Tint Color
Color Tint Cycle only. The starting tint color. Default is #ff6b6b.
Second Tint Color
Color Tint Cycle only. The ending tint color. Default is #4ecdc4.
Tint Cycle Speed
Color Tint Cycle only. Slow (4 seconds), Medium (2 seconds), or Fast (1 second). Default is Medium.
Tint Opacity
Color Tint Cycle only. How strong the tint is, 10 to 80 percent. Default is 30 percent.

Settings: progress indicator

These fields only show in Scratch Off mode.

Show Progress Indicator
Shows how much of the image has been revealed. Default is No.
Progress Position
Top, Bottom, Top Left (Corner), Top Right (Corner), Bottom Left (Corner), or Bottom Right (Corner). Default is Bottom.
Progress Style
Progress Bar, Percentage Text Only, Bar + Percentage, or Circular Progress. Default is Progress Bar.
Progress Background Color
The empty part of the bar or circle. Default is light gray (#e0e0e0).
Progress Fill Color
The filled part of the bar or circle. Default is green (#4CAF50).
Progress Text Color
The color of the percent text. Default is dark gray (#333333).

Settings: reset button

These fields only show in Scratch Off mode.

Reset Button
Show Reset Button or Hide Reset Button. The button covers the image again so people can scratch again. Default is Hide Reset Button.
Reset Button Text
The button label, up to 50 characters. Default is Reset.
Reset Button Position
Top Left, Top Right, Bottom Left, or Bottom Right. Default is Bottom Right. If the progress indicator is also at the Bottom, both sit together in one bar.
Button Background Color
Default is black (#000000).
Button Text Color
Default is white (#ffffff).

Settings: completion

These fields only show in Scratch Off mode. They control what happens once enough of the image is uncovered.

Completion Threshold
How much of the image must be revealed, from 0 to 100 percent, before the completion action runs. Default is 70 percent.
On Completion
No Action, Auto-reveal Remainder, or Show Message. Default is No Action.
Completion Message
Shows when you pick Show Message. Up to 200 characters. Default is You did it!

How each reveal mode works

Scratch Off (Click & Drag): Visitors press and drag with a mouse or finger to erase the top image. What they erase stays erased. You can add a progress indicator, a reset button, and a completion action. Auto-reveal Remainder clears the rest of the top image right away. Show Message displays your message in the middle of the area for about 3 seconds.

Hover Reveal (Mouse Follow): A spotlight follows the mouse and shows the bottom image under it. Nothing stays erased. When the mouse leaves the area, the full top image comes back. You can choose a hard or soft spotlight edge.

In both modes, the effect tracks the mouse across the whole row or column, even when it is over your text or buttons.

The top image is stretched to fill the whole area. The bottom image is cropped to fill the area without stretching. For the best match, use two images with the same shape as your row or column.

Mobile, touch, and accessibility

Scratch Off mode works with touch. Inside the reveal area, a finger drag scratches the image instead of scrolling the page.

Hover Reveal mode also works with touch. A slow drag moves the spotlight. A fast swipe scrolls the page as normal. When the finger lifts, the top image comes back.

On screens 768 px wide or less, the progress indicator and reset button get smaller.

If the window is resized, scratch progress is kept.

The effect is driven by mouse and touch only. There is no keyboard control. Do not put important information only in the hidden image.

If a visitor prefers reduced motion, the progress, message, and reset button transitions are turned off. Spotlight animations still run.

In high contrast mode, the progress indicator and reset button get a white background and a black border.

When the page is printed, the bottom image prints and the top layer and controls are hidden.

Performance notes

The plugin's script and styles only load on pages that have a row or column with Enable Image Reveal set to Yes.

The script loads with defer, so it does not block the page from showing.

Drawing is synced to the browser's screen refresh for smooth movement.

The bottom image loads with high priority, since it is often near the top of the page. Use well-sized images to keep pages fast.

Troubleshooting

The effect does not work in the Beaver Builder editor.
Nothing shows on the live page.
The reveal area is very small or hidden.
The top image looks stretched.
The images load from another site or a CDN and the effect breaks.
I do not see the progress, reset, or completion settings.
I do not see Spotlight Edge Style.
On my phone, the page will not scroll over the reveal.
I see a warning that Beaver Builder is required.

Changelog

Version 0.1.3.2 September 13, 2026

  • Fixed automatic update checks so new versions show on the Plugins page.

Version 0.1.3.1 June 15, 2026

  • Improved stability if some plugin files are missing or damaged.

Version 0.1.3.0 June 13, 2026

  • Added a simple Image Reveal info page to the admin menu.

Version 0.1.2.20 March 16, 2026

  • Fixed an update server setting that could cause errors with other Your WP Guy plugins on the same site.

Version 0.1.2.19 January 28, 2026

  • Security improvements.

Version 0.1.2.18 January 28, 2026

  • Improved scratch mode speed when tracking progress.

Version 0.1.2.17 January 28, 2026

  • Fixed the progress indicator not updating in scratch mode.

Version 0.1.2.16 January 28, 2026

  • Fixed the progress bar and reset button lining up when both sit at the bottom.

Version 0.1.2.15 January 28, 2026

  • Fixed the reset button not responding to clicks in scratch mode.

Version 0.1.2.12 January 28, 2026

  • Improved how the reset button handles clicks in scratch mode.

Version 0.1.2.11 January 28, 2026

  • Fixed clicks on the reset button scratching the image instead of resetting it.

Version 0.1.2.9 January 27, 2026

  • Added an editor preview that shows the top image as the background while you edit.

Version 0.1.2.8 January 27, 2026

  • Fixed a white screen and save problems in the Beaver Builder editor.

Version 0.1.2.0 January 26, 2026

  • Added automatic updates from the WordPress Plugins page.

Version 0.1.1.1 January 26, 2026

  • Fixed the reveal effect not showing on column backgrounds.

Still stuck? Ask our team.

We've got your back.

Talk to our team
Back to Image Reveal