Effects · Gutenberg
Interactive Image Sheen block for WordPress
An image card with a glossy light sheen that follows the mouse cursor, giving a premium holographic feel.
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
An image card with a glossy light sheen that follows the mouse cursor, giving a premium holographic feel.
Inspector panels on this block: Image, Dimensions, Sheen Effect, Caption. Those titles come from index.js, not from a shared template.
Behavior controls: “Dimensions — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Interactive Image Sheen” (block name `blockenberg/interactive-image-sheen` in block.json). Style it in the sidebar after insert.
How to use Interactive Image Sheen block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Interactive Image Sheen”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Image. Set “Alt Text”, “Dimensions — Alignment”, “Max Width (px)”, “Height (px)”.
- 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. Saved as `imageAlt`. |
| Dimensions — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align2`. |
| Max Width (px) | Numeric range control in the inspector. Range 160–1200. block.json default: 480. Saved as `imageWidth`. |
| Height (px) | Numeric range control in the inspector. Range 100–800. block.json default: 320. Saved as `imageHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `imageRadius`. |
| Sheen Size (% of card) | Numeric range control in the inspector. Range 20–120. block.json default: 60. Saved as `sheenSize`. |
| Sheen Blur (px) | Numeric range control in the inspector. Range 0–100. block.json default: 40. Saved as `sheenBlur`. |
| Tilt Strength | Numeric range control in the inspector. Range 0–30. block.json default: 12. Saved as `tiltStrength`. |
| Dynamic Shadow | On/off toggle in the inspector. On by default. Saved as `tiltShadow`. |
| Show Caption | On/off toggle in the inspector. Off by default. Saved as `showCaption`. |
| Caption Text | Multiline text field in the inspector. Saved as `caption`. |
| Sheen | Color control in the inspector. block.json default: rgba(255,255,255,0.35). Saved as `sheenColor`. |
| Colors — Shadow | Color control in the inspector. block.json default: rgba(99,102,241,0.4). Saved as `shadowColor`. |
| Caption | Color control in the inspector. block.json default: #64748b. Saved as `captionColor`. |
| Section BG | Color control in the inspector. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- An image card with a glossy light sheen that follows the mouse cursor, giving a premium holographic feel — that is the job of Interactive Image Sheen, not a generic content block.
- Use it when you need the editor control labeled “Alt Text”, which exists on this block’s inspector.
- 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 Interactive Image Sheen block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Interactive Image Sheen”. It sits under Effects. After insert, open Image and set “Alt Text”, “Dimensions — Alignment”, “Max Width (px)”, “Height (px)”.
What makes Interactive Image Sheen different from other Blockenberg blocks?
An image card with a glossy light sheen that follows the mouse cursor, giving a premium holographic feel. Inspector labels on this block include “Alt Text”, “Dimensions — Alignment”, “Max Width (px)”, “Height (px)”.
Is the Interactive Image Sheen Gutenberg block free?
Yes. Interactive Image Sheen ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Interactive Image Sheen 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, Dimensions, Sheen Effect, Caption).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
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.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Interactive Image Sheen from the Gutenberg inserter.