Click to Zoom
A click, a tap or the Enter key enlarges your image twice at the chosen spot; a second click shows it whole again.
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 frame is a real <button class="czm-frame"> holding your <img class="czm-image">, an optional caption and the “Click to zoom” pill. On activation, the script toggles the is-zoomed class and the aria-pressed state; the CSS then applies scale(var(--czm-scale)) (2) over --czm-duration (0.4 s) and hides the pill.
With a mouse or a finger, the clicked point becomes the origin of the enlargement (transform-origin as a percentage): you zoom where you clicked. With Enter or Space, which have no position, the zoom starts from the centre; once enlarged, arrow keys shift the area by 10% and Escape returns to the whole view.
Each .fx-0183-root is wired separately, with no id: several clickable images on a page stay independent, and the script can be pasted twice without error.
Accessibility
- Native button: the frame takes Tab focus and activates with Enter or Space;
aria-pressedannounces “pressed” while the image is enlarged. Its name comes from the image alt text and the pill. - Keyboard once zoomed: arrow keys move the view, Escape goes back. In Safari, Tab only reaches buttons when “Press Tab to highlight each item” is on (Option + Tab otherwise), as with any button.
- Touch: a tap zooms at the touched point, a second tap goes back;
touch-action: manipulationremoves the double-tap delay without blocking scrolling. - Reduced motion: under
prefers-reduced-motion: reduce, the image switches straight to the enlarged view and back, with no animation.
Browser compatibility
HTML button, CSS transforms, aspect-ratio and 2 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26.5: zoom at the clicked point, two independent copies, script pasted twice without error, Enter then arrow keys, a real tap at 390 px (Chromium).
Without JavaScript, the button shows the image without zoom. Without aspect-ratio, the frame takes the image's height.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0183-root">
<button type="button" class="czm-frame" aria-pressed="false">
<img class="czm-image" src="your-image.jpg" alt="Image description">
<span class="czm-label" aria-hidden="true">Click Me</span>
<span class="czm-hint">Click to zoom</span>
</button>
</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 .czm-image) |
violet grid pattern (inline SVG) | Your image and its alt, which also names the button. A file twice as wide as the frame stays sharp once enlarged. |
--czm-scale |
2 | Enlargement after the click. 2.5 to 3 for small text. |
--czm-duration |
0.4s | Duration of the zoom in and out. |
--czm-width · --czm-ratio · --czm-radius |
280px · 7 / 5 · 0.75rem | Maximum width (the frame shrinks on small screens), proportions and rounding. |
.czm-hint pill |
“Click to zoom” | Prompt text, hidden once the image is enlarged; translate it or delete the <span>. |
.czm-label caption |
“Click Me” | Text centred on the image; remove it on a real photo. |
