Media · Gutenberg
Image Magnifier block for WordPress
Image with a zoom lens that follows the cursor on hover — perfect for product photography and detail shots.
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 zoom lens that follows the cursor on hover — perfect for product photography and detail shots.
Inspector panels on this block: Image, Zoom Effect, Caption & Hint. Those titles come from index.js, not from a shared template.
Behavior controls: “Image — Alignment” options: Left, Center, Right; “Effect Type” options: Floating Lens, Side Preview Box; “Lens Shape” options: Circle, Square.
Where to find it
Gutenberg inserter → Media → search “Image Magnifier” (block name `blockenberg/image-magnifier` in block.json). Style it in the sidebar after insert.
How to use Image Magnifier block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Magnifier”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Image. Set “Alt Text”, “Max Width (px)”, “Border Radius (px)”, “Image — Alignment”.
- Check the published page. The view script reads HTML data attributes: data-effect, data-lens-border, data-lens-border-w, data-lens-shadow, data-lens-shape, data-lens-size, data-preview-border, data-preview-h. 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 `alt`. |
| Max Width (px) | Numeric range control in the inspector. Range 200–1200. block.json default: 600. Saved as `width`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 8. Saved as `imageRadius`. |
| Image — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Effect Type | Select control; the chosen value is saved on the block. Options: Floating Lens; Side Preview Box. block.json default: lens. Saved as `effectType`. |
| Zoom Factor % | Numeric range control in the inspector. Range 110–500. block.json default: 250. Saved as `zoomFactor`. |
| Lens Size (px) | Numeric range control in the inspector. Range 60–400. block.json default: 150. Saved as `lensSize`. |
| Lens Shape | Select control; the chosen value is saved on the block. Options: Circle; Square. block.json default: circle. Saved as `lensShape`. |
| Lens Border Width (px) | Numeric range control in the inspector. Range 0–6. block.json default: 2. Saved as `lensBorderWidth`. |
| Lens Shadow | On/off toggle in the inspector. On by default. Saved as `lensShadow`. |
| Preview Width (px) | Numeric range control in the inspector. Range 150–600. block.json default: 300. Saved as `previewWidth`. |
| Preview Height (px) | Numeric range control in the inspector. Range 150–600. block.json default: 300. Saved as `previewHeight`. |
| Show Caption | On/off toggle in the inspector. Off by default. Saved as `showCaption`. |
| Caption | Text field in the inspector. Saved as `caption`. |
| Show Hover Hint | On/off toggle in the inspector. On by default. Saved as `showHint`. |
| Hint Text | Text field in the inspector. block.json default: Hover to zoom. Saved as `hint`. |
| Lens Border | Color control in the inspector. block.json default: #6c3fb5. Saved as `lensBorderColor`. |
| Preview Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `previewBorder`. |
| Caption Color | Color control in the inspector. block.json default: #6b7280. Saved as `captionColor`. |
| Hint Color | Color control in the inspector. block.json default: #9ca3af. Saved as `hintColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-effect, data-lens-border, data-lens-border-w, data-lens-shadow, data-lens-shape, data-lens-size, data-preview-border, data-preview-h.
When this is the right block
- Image with a zoom lens that follows the cursor on hover — perfect for product photography and detail shots — that is the job of Image Magnifier, 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 magnifier, zoom, image.
- Inserter grouping: video, animation, and rich media sections.
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 Magnifier block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Magnifier”. It sits under Media. After insert, open Image and set “Alt Text”, “Max Width (px)”, “Border Radius (px)”, “Image — Alignment”.
What makes Image Magnifier different from other Blockenberg blocks?
Image with a zoom lens that follows the cursor on hover — perfect for product photography and detail shots. Inspector labels on this block include “Alt Text”, “Max Width (px)”, “Border Radius (px)”, “Image — Alignment”.
Is the Image Magnifier Gutenberg block free?
Yes. Image Magnifier ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Magnifier 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, Zoom Effect, Caption & Hint).
Related media blocks
Image Accordion
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Image Box
A clickable image card with overlay title, hover effects, and a link.
Lightbox Gallery
Image grid where clicking a thumbnail opens a full-screen lightbox with prev/next navigation.
Gallery Showcase
Featured image with a clickable thumbnail strip — click any thumbnail to swap the main large view. Perfect for portfolio details, product image galleries, and case study illustrations.
Hotspot Image
Image with interactive hotspot pins that reveal tooltips on hover or click.
Image Filter
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Magnifier from the Gutenberg inserter.