Image Zoom

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { ImageZoom } from '@vitnode/core/components/ui/image-zoom'

<ImageZoom
  alt="The VitNode AdminCP dashboard"
  imageClassName="w-full rounded-md border"
  src="/screenshots/dashboard.webp"
/>

Click the image, or focus it and press Enter, and it glides to the middle of the screen. Click anywhere, press Escape or hit × to send it back.

Drag to dismissCopy Anchor Link

Grab the zoomed image and drag or flick it in any direction to close. Let go early and it springs back to the middle. The backdrop fades as you drag, so you can see where you're headed.

Sharper zoomCopy Anchor Link

Show a light thumbnail and load the big file only on zoom:

<ImageZoom
  alt="The VitNode AdminCP dashboard"
  src={thumbnail}
  zoomSrc={fullSize}
/>

StylingCopy Anchor Link

• className styles the clickable wrapper. Use it for layout and visibility, like hidden dark:block for theme-specific screenshots.
• imageClassName styles the image on the page.

The zoomed image always fits the screen without cropping.

AccessibilityCopy Anchor Link

• The image is a real button that opens a dialog.
• alt is required. It labels the image and names the zoomed view.
• Focus is trapped while zoomed and returns to the image on close.
• Reduced motion zooms instantly. Reduced transparency swaps the blurred backdrop for a solid one.

PropsCopy Anchor Link