Image Zoom

An effect that allows you to zoom in on an image on hover.

Preview

Code

Open in

Installation

CLI

Manual

Usage

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

API Reference

ImageZoom

Prop	Type	Default
zoomScale?	number	3
transition?	Transition	{ type: 'spring', stiffness: 200, damping: 28 }
style?	React.CSSProperties	-
zoomOnClick?	boolean	true
zoomOnHover?	boolean	true
disabled?	boolean	false
width?	React.CSSProperties['width']	100%
height?	React.CSSProperties['height']	100%
children?	React.ReactElement	-
...props?	React.ComponentProps<"div">	-

Image

Prop	Type	Default
objectFit?	React.CSSProperties['objectFit']	cover
as?	React.ElementType	img

Credits

• Inspired by Jurre Hover Zoom Framer component.