Zoom with Overlay
A square follows the mouse, a finger or the arrow keys over your image, and the panel next to it shows exactly that area enlarged twice.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Gallery has 44 effects, including 6 free. Explore the category →
3 usage examples
How it works
On the left, the .zov-frame holds your <img class="zov-image"> and the marker square .zov-indicator; on the right, the .zov-result panel is empty in the HTML. The script gives it the image itself as a background, or the data-zoom-src file: there is no longer any image to copy into the panel by hand.
The square's size comes from the panel: panel width divided by data-zoom (2), so 68 px for the default panel (140 px wide, 136 px inside its border). On every move, the square stays inside the image and the panel shows, enlarged, exactly what the square covers, object-fit: cover crop included. At rest, the panel shows the middle of the image.
The script wires each .fx-0184-root separately and follows size changes (ResizeObserver). Image and panel sit side by side and stack when space runs out.
Accessibility
- Keyboard: the image takes Tab focus, the square appears, arrow keys move it by 10 px (40 px with Shift) and Escape hides it; the panel follows.
- Touch: putting down and dragging a finger moves the square; page scrolling is held back on the image only (
touch-action: none). - Screen readers: the image and its alt text are read inside a named group; the square and the panel, purely visual, are hidden (
aria-hidden). - Reduced motion: under
prefers-reduced-motion: reduce, the square appears without a fade; there is no other animation.
Browser compatibility
Pointer Events, object-fit, aspect-ratio, ResizeObserver and close to 4 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26.5: the buyer's red image correctly shown in the panel, two independent copies, script pasted twice without error, arrow keys, a real finger at 390 px (Chromium), panel moved under the image with no overflow.
Without JavaScript, the image shows and the panel stays empty. Without ResizeObserver, the panel is recomputed on the next move after a size change.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0184-root">
<div class="zov-wrap">
<div class="zov-frame" tabindex="0" role="group" aria-label="Zoom: hover the image, drag a finger or use the arrow keys; the chosen area appears enlarged next to it" data-zoom="2">
<img class="zov-image" src="your-photo.jpg" data-zoom-src="your-photo-large.jpg" alt="Photo description">
<span class="zov-label" aria-hidden="true">Hover</span>
<div class="zov-indicator" aria-hidden="true"></div>
</div>
<div class="zov-result" aria-hidden="true"></div>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Image (HTML — src of .zov-image) |
violet grid pattern (inline SVG) | Your photo and its alt. data-zoom-src on the same tag gives the panel a larger, sharper file. |
data-zoom (on .zov-frame) |
2 | Enlargement in the panel; it also sets the square's size (panel ÷ zoom). |
--zov-width · --zov-ratio |
180px · 9 / 7 | Image width and proportions. |
--zov-panel · --zov-panel-ratio |
140px · 1 | Panel width and proportions; an elongated panel gives an elongated marker. |
--zov-gap · --zov-radius |
1rem · 0.75rem | Space between image and panel, rounding of both. |
Square colours (.zov-indicator rule) |
white border, indigo fill at 20% | Change border and background to match your brand. |
FAQ
<div>: the script reuses the frame's image (or data-zoom-src) and keeps it up to date if you change the photo.data-zoom. Raise the zoom for a smaller square and a stronger detail.
