Product Zoom
Product gallery: thumbnails change the large photo on hover, click, tap or keyboard, and the large photo zooms twice under the pointer.
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
The large photo .pdz-frame and the .pdz-thumb thumbnails are real tags: an <img> for the large one, a <button> wrapping an <img> for each thumbnail. Choosing a thumbnail (mouse hover, click, tap or keyboard focus) copies its image into the large photo, or the file in its data-zoom-src if there is one, together with its alt text. The chosen thumbnail switches to aria-pressed="true" and the large photo gives a short 110% pulse for 0.3 s.
The zoom: while the mouse or a finger is on the large photo, the is-zoomed class enlarges it to --pdz-zoom (2) and the target point becomes the zoom origin, like a magnifier following the pointer. On leaving, the photo is whole again.
Every lookup starts from the .fx-0185-root: two galleries on a page each keep their own large photo without driving each other, and the script can be pasted twice.
Accessibility
- Thumbnails: real buttons, reached with Tab, named by their image's alt text, with
aria-pressedtelling which one is shown. Focus alone changes the photo. - Keyboard zoom: the large photo takes Tab focus and zooms on its centre; arrow keys shift the area by 5% (20% with Shift), Escape shows the whole photo again.
- Touch: tapping a thumbnail changes the photo; putting a finger on the large photo and dragging zooms and pans, lifting it shows the whole photo again (
touch-action: noneon the large photo only). A single tap does not leave the photo enlarged. - Reduced motion: under
prefers-reduced-motion: reduce, no pulse and no sliding; the zoom is applied at once.
Browser compatibility
HTML buttons, Pointer Events, CSS transforms, aspect-ratio and 3 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26.5: two independent galleries (hovering the 2nd no longer touches the 1st), script pasted twice without error, thumbnails with Tab, a real tap and drag at 390 px (Chromium).
Without JavaScript, the large photo and thumbnails show, with no switching or zoom. In Safari, Tab only reaches buttons when “Press Tab to highlight each item” is on.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0185-root">
<div class="pdz-gallery">
<div class="pdz-frame" tabindex="0" role="group" aria-label="Product photo: hover it, drag a finger or use the arrow keys to zoom in">
<img class="pdz-image" src="view-1-large.jpg" alt="Front view">
<span class="pdz-label" aria-hidden="true">Product View</span>
</div>
<div class="pdz-thumbs" role="group" aria-label="Product variants">
<button type="button" class="pdz-thumb" aria-pressed="true"><img src="view-1.jpg" data-zoom-src="view-1-large.jpg" alt="Front view"></button>
<button type="button" class="pdz-thumb" aria-pressed="false"><img src="view-2.jpg" data-zoom-src="view-2-large.jpg" alt="Back view"></button>
<!-- as many thumbnails as needed -->
</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 |
|---|---|---|
| Images (HTML — thumbnails and large photo) | 4 colour patterns (inline SVG) | One thumbnail = one <button class="pdz-thumb"> with its <img>. data-zoom-src on a thumbnail's image gives the large version shown and zoomed. Put the same image in .pdz-image to start with. |
--pdz-zoom |
2 | Enlargement of the large photo under the pointer. |
--pdz-width · --pdz-ratio · --pdz-radius |
280px · 7 / 4 · 0.75rem | Maximum width, proportions and rounding of the large photo (and of the gallery). |
--pdz-thumb · --pdz-thumb-ratio |
60px · 4 / 3 | Thumbnail size and shape. |
--pdz-accent |
#6366f1 | Border of the chosen or hovered thumbnail. |
.pdz-label caption |
“Product View” | Text centred on the large photo, hidden while zoomed; remove it on real photos. |
FAQ
data-zoom-src on a thumbnail's image. The thumbnail stays light and the large photo loads the big file when it is chosen.pointerenter listener from the script. Click, tap and keyboard keep working.
