Image Zoom is a web component that provides a zoom experience. Click an image to expand it to fill the viewport with a smooth scale and fade animation. Clicking the zoomed image, the overlay, or the close button dismisses the view.

Click the image to zoom in.

<dap-ds-image-zoom>
<img
  src="/img/components/apples.webp"
  alt="Apples in a bowl"
  style={{width: 280, height: 180, objectFit: 'cover', display: 'block', borderRadius: 8}} />
</dap-ds-image-zoom>

When isDisabled is set, the expand icon is hidden and clicking the image does nothing.

<dap-ds-image-zoom isDisabled>
<img
  src="/img/components/apples.webp"
  alt="Apples in a bowl"
  style={{width: 280, height: 180, objectFit: 'cover', display: 'block', borderRadius: 8}} />
</dap-ds-image-zoom>

Use zoomMargin to keep a pixel gap between the zoomed image and the viewport edges.

<dap-ds-image-zoom zoomMargin="48">
<img
  src="/img/components/apples.webp"
  alt="Apples in a bowl"
  style={{width: 280, height: 180, objectFit: 'cover', display: 'block', borderRadius: 8}} />
</dap-ds-image-zoom>

Provide a zoomSrc to display a higher-resolution image when zoomed, while keeping a smaller thumbnail in the page.

<dap-ds-image-zoom zoomSrc="/img/components/apples.webp">
<img
  src="/img/components/apples.webp"
  alt="Apples in a bowl"
  style={{width: 140, height: 100, objectFit: 'cover', display: 'block', borderRadius: 6}} />
</dap-ds-image-zoom>

Override the default accessible labels with expandButtonAriaLabel and unzoomButtonAriaLabel.

<dap-ds-image-zoom
expandButtonAriaLabel="Kép nagyítása"
unzoomButtonAriaLabel="Kép kicsinyítése">
<img
  src="/img/components/apples.webp"
  alt="Almák egy tálban"
  style={{width: 280, height: 180, objectFit: 'cover', display: 'block', borderRadius: 8}} />
</dap-ds-image-zoom>

• The trigger wrapper has role="button" and tabindex="0", so it is reachable by keyboard.
• Press Enter or Space to zoom; press Escape to close.
• Focus moves to the close button when the dialog opens and returns to the trigger when it closes.
• The expand and close buttons have configurable aria-label values via expandButtonAriaLabel and unzoomButtonAriaLabel.
• The component uses a native <dialog> element, which is automatically exposed to assistive technologies as a modal.

import { DapDSImageZoom } from 'dap-design-system'

import { DapDSImageZoomReact } from 'dap-design-system/react'

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSImageZoom } from 'dap-design-system/components'

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-image-zoom::part(trigger) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-image-zoom::part(trigger),
.my-custom-dap-ds-image-zoom::part(dialog) {
  /* Shared styles */
}

Example usage:

<dap-ds-image-zoom class="my-custom-dap-ds-image-zoom">
  Image zoom
</dap-ds-image-zoom>

.my-custom-dap-ds-image-zoom::part(trigger) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-image-zoom
  style="--dds-image-zoom-overlay-bg: value; --dds-image-zoom-transition-speed: value;">
  Image zoom
</dap-ds-image-zoom>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-image-zoom {
  --dds-image-zoom-overlay-bg: value;
  --dds-image-zoom-transition-speed: value;
  --dds-image-zoom-transition-timing: value;
}

<dap-ds-image-zoom class="my-custom-dap-ds-image-zoom">
  Image zoom
</dap-ds-image-zoom>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-image-zoom {
  --dds-image-zoom-overlay-bg: value;
  --dds-image-zoom-transition-speed: value;
}