Effects · Gutenberg
Hovering Image Stack block for WordPress
A stack of images arranged in a fan/cascade that spreads outward on hover revealing all images.
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
A stack of images arranged in a fan/cascade that spreads outward on hover revealing all images.
Inspector panels on this block: Images, Image, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Spread Mode” options: Fan, Cascade Down, Horizontal.
Where to find it
Gutenberg inserter → Effects → search “Hovering Image Stack” (block name `blockenberg/hovering-image-stack` in block.json). Style it in the sidebar after insert.
How to use Hovering Image Stack block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Hovering Image Stack”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Images. Set “Alt text”, “Caption”, “Spread Mode”, “Fan Angle (°)”.
- Check the published page. The view script reads HTML data attributes: data-opts. 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. |
| Caption | Text field in the inspector. |
| Spread Mode | Select control; the chosen value is saved on the block. Options: Fan; Cascade Down; Horizontal. block.json default: fan. Saved as `spreadMode`. |
| Fan Angle (°) | Numeric range control in the inspector. Range 0–45. block.json default: 15. Saved as `spreadAngle`. |
| Spread Distance (px) | Numeric range control in the inspector. Range 20–200. block.json default: 60. Saved as `spreadDist`. |
| Image Width (px) | Numeric range control in the inspector. Range 100–400. block.json default: 200. Saved as `imageWidth`. |
| Image Height (px) | Numeric range control in the inspector. Range 100–600. block.json default: 280. Saved as `imageHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `imageRadius`. |
| Border Width (px) | Numeric range control in the inspector. Range 0–10. block.json default: 3. Saved as `borderWidth`. |
| Shadow Strength (%) | Numeric range control in the inspector. Range 0–60. block.json default: 30. Saved as `shadowStrength`. |
| Show Captions on Hover | On/off toggle in the inspector. Off by default. Saved as `showCaption`. |
| Colors — Background | Color control in the inspector. block.json default: transparent. Saved as `bgColor`. |
| Image Border | Color control in the inspector. block.json default: #ffffff. Saved as `borderColor`. |
| Caption Text | Color control in the inspector. block.json default: #0f172a. Saved as `captionColor`. |
| Caption BG | Color control in the inspector. block.json default: #ffffff. Saved as `captionBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A stack of images arranged in a fan/cascade that spreads outward on hover revealing all images — that is the job of Hovering Image Stack, 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 images, stack, fan.
- 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 Hovering Image Stack block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Hovering Image Stack”. It sits under Effects. After insert, open Images and set “Alt text”, “Caption”, “Spread Mode”, “Fan Angle (°)”.
What makes Hovering Image Stack different from other Blockenberg blocks?
A stack of images arranged in a fan/cascade that spreads outward on hover revealing all images. Inspector labels on this block include “Alt text”, “Caption”, “Spread Mode”, “Fan Angle (°)”.
Is the Hovering Image Stack Gutenberg block free?
Yes. Hovering Image Stack ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Hovering Image Stack 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: Images, Image, Layout).
Related effects blocks
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Rotating Image Tiles
Responsive grid of tiles that continuously flip to reveal a second image, with staggered timing.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
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.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Hovering Image Stack from the Gutenberg inserter.