Image Zoom

2 min readStableBeginner

ImageZoom turns any image into a click-to-zoom thumbnail. Clicking it opens a fullscreen overlay, so readers can study a screenshot or a diagram without leaving the page.

Quick Start

Point src at an image and give it alt text. The thumbnail renders at the file's natural size with a zoom-in cursor.

quick-start.mdx

MDX

<ImageZoom src="/img/icon.png" alt="OwnDocs icon" />

Adding Options

width and height size the thumbnail only. The zoomed copy ignores both and caps at 90% of the viewport in each direction, scaled with object-contain.

sized-thumbnail.mdx

MDX

<ImageZoom src="/img/icon.png" alt="OwnDocs icon" width={64} height={64} />

Advanced

Alt text is optional and defaults to an empty string, so a decorative image can pass alt="" and stay out of a screen reader's way. The overlay still announces itself as a dialog labeled "Zoomed image". Either way the thumbnail stays keyboard-reachable: Tab to it, then Enter or Space opens the overlay and focus jumps to the close button. Escape or a click on the backdrop closes it, and page scrolling locks while it's open.

decorative-image.mdx

MDX

<ImageZoom src="/img/icon.png" alt="" width={48} height={48} />

Options

srcstringrequired

Image source, relative to public/ or an absolute URL. Both copies render through a plain <img> tag rather than next/image, so no loader configuration is involved — but the img-src list in next.config.mjs still decides which remote hosts a browser will fetch.

altstringDefault: empty string

Alt text, applied to both the thumbnail and the zoomed copy.

widthnumber

Thumbnail width in pixels, set as the width attribute. Omit to use the file's natural width.

heightnumber

Thumbnail height in pixels, set as the height attribute. Omit to use the file's natural height. Set only one of the two and the browser keeps the image's natural aspect ratio.

Those four props are the whole surface. The overlay's own controls aren't configurable: it always renders at z-50 over an 80% black backdrop, labels itself Zoomed image, and puts a close button labeled Close zoomed image in the top-right corner.

Cards

Embed

Was this page helpful?