║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Image Zoom description: An effect that allows you to zoom in on an image on hover. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-10-28

<ComponentPreview name="demo-primitives-effects-image-zoom" />

Installation

<ComponentInstallation name="primitives-effects-image-zoom" />

Usage

<ImageZoom>
  <Image src="..." />
</ImageZoom>

API Reference

ImageZoom

<TypeTable type={{ zoomScale: { description: 'The scale of the image zoom effect.', type: 'number', required: false, default: '3', }, transition: { description: 'The transition of the image zoom effect.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 200, damping: 28 }", }, style: { description: 'The style of the image zoom effect.', type: 'React.CSSProperties', required: false, }, zoomOnClick: { description: 'Whether the image zoom effect is triggered on click.', type: 'boolean', required: false, default: 'true', }, zoomOnHover: { description: 'Whether the image zoom effect is triggered on hover.', type: 'boolean', required: false, default: 'true', }, disabled: { description: 'Whether the image zoom effect is disabled.', type: 'boolean', required: false, default: 'false', }, width: { description: 'The width of the image zoom effect.', type: "React.CSSProperties['width']", required: false, default: '100%', }, height: { description: 'The height of the image zoom effect.', type: "React.CSSProperties['height']", required: false, default: '100%', }, children: { description: 'The children of the image zoom effect.', type: 'React.ReactElement', required: false, }, '...props': { description: 'The props of the image zoom container.', type: 'React.ComponentProps<"div">', required: false, }, }} />

Image

<TypeTable type={{ objectFit: { description: 'The object fit of the image.', type: "React.CSSProperties['objectFit']", required: false, default: 'cover', }, as: { description: 'The component to render the image as.', type: 'React.ElementType', required: false, default: 'img', }, }} />

Credits

• Inspired by Jurre Hover Zoom Framer component.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║