Effects · Gutenberg
Image Reveal block for WordPress
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Inspector panels on this block: Image, Reveal Effect, Overlay & Labels. Those titles come from index.js, not from a shared template.
Behavior controls: “Aspect Ratio” options: Auto (natural), 1:1 Square, 4:3, 3:2, 16:9; “Trigger” options: On Scroll (IntersectionObserver), On Hover, On Click; “Reveal Style” options: Sweep (curtain), Fade, Zoom In, Blur to Clear; “Direction” options: Left → Right, Right → Left, Top → Bottom, Bottom→ Top.
Where to find it
Gutenberg inserter → Effects → search “Image Reveal” (block name `blockenberg/image-reveal` in block.json). Style it in the sidebar after insert.
How to use Image Reveal block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Reveal”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Image. Set “Alt Text”, “Aspect Ratio”, “Max Width (px, 0 = full)”, “Border Radius (px)”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Alt Text | Text field in the inspector. Saved as `imageAlt`. |
| Aspect Ratio | Select control; the chosen value is saved on the block. Options: Auto (natural); 1:1 Square; 4:3; 3:2; 16:9; 21:9 Cinematic; 9:16 Portrait. block.json default: 16-9. Saved as `aspectRatio`. |
| Max Width (px, 0 = full) | Numeric range control in the inspector. Range 0–1400. block.json default: 0. Saved as `maxWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 8. Saved as `borderRadius`. |
| Trigger | Select control; the chosen value is saved on the block. Options: On Scroll (IntersectionObserver); On Hover; On Click. block.json default: scroll. Saved as `trigger`. |
| Reveal Style | Select control; the chosen value is saved on the block. Options: Sweep (curtain); Fade; Zoom In; Blur to Clear. block.json default: sweep. Saved as `revealStyle`. |
| Direction | Select control; the chosen value is saved on the block. Options: Left → Right; Right → Left; Top → Bottom; Bottom→ Top. block.json default: left. Saved as `direction`. |
| Animation Duration (ms) | Numeric range control in the inspector. Range 200–2000. block.json default: 600. Saved as `animationDuration`. |
| Scroll threshold (% of element in view) | Numeric range control in the inspector. Range 5–90. block.json default: 30. Saved as `scrollThreshold`. |
| Reveal only once | On/off toggle in the inspector. On by default. Saved as `revealOnce`. |
| Overlay Opacity (%) | Numeric range control in the inspector. Range 10–100. block.json default: 75. Saved as `overlayOpacity`. |
| Show Overlay Label | On/off toggle in the inspector. On by default. Saved as `showOverlayLabel`. |
| Overlay Label Text | Text field in the inspector. block.json default: Hover to reveal. Saved as `overlayLabel`. |
| Show Revealed Label | On/off toggle in the inspector. Off by default. Saved as `showRevealedLabel`. |
| Revealed Label Text | Text field in the inspector. Saved as `revealedLabel`. |
| Show Caption | On/off toggle in the inspector. Off by default. Saved as `showCaption`. |
| Caption | Text field in the inspector. Saved as `caption`. |
| Overlay Color | Color control in the inspector. block.json default: #1e1b4b. Saved as `overlayBg`. |
| Label Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `overlayTextColor`. |
| Caption Color | Color control in the inspector. block.json default: #6b7280. Saved as `captionColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption — that is the job of Image Reveal, not a generic content block.
- Use it when you need the editor control labeled “Alt Text”, which exists on this block’s inspector.
- It matches pages about image, reveal, curtain.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Image Reveal block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Reveal”. It sits under Effects. After insert, open Image and set “Alt Text”, “Aspect Ratio”, “Max Width (px, 0 = full)”, “Border Radius (px)”.
What makes Image Reveal different from other Blockenberg blocks?
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption. Inspector labels on this block include “Alt Text”, “Aspect Ratio”, “Max Width (px, 0 = full)”, “Border Radius (px)”.
Is the Image Reveal Gutenberg block free?
Yes. Image Reveal ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Reveal to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Reveal Effect, Overlay & Labels).
Related effects blocks
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Scroll Reveal
Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport.
Split Text
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Kinetic Text
Text characters that scatter outward and snap back on hover with smooth physics animation.
Magnetic Button
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Reveal from the Gutenberg inserter.