Image Lens Magnifier
Image Lens Magnifier is an image interaction in the UI HUB image interactions collection. A hover lens: a circular, pointer-events-none overlay tracks the clamped cursor; an inner copy of the base image is scaled ~3x (1.5-6) and translated so the pixel under the lens centre lands on the lens centre; a shared CSS transform transition gives the follower a short lag with zero JS animation loop; leaving fades t…
The component is driven by 10 documented props (image, zoom, lensSize, cornerRadius, borderColor, followSmoothing and 4 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: POINTER-follow with clamped lens position; magnified inner layer pinned under lens centre; ResizeObserver sizing, disconnected on unmount.
Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Image Lens Magnifier?
A hover-following circular lens that magnifies an image region up to 6x with zero per-frame state.
Image Lens Magnifier at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 10
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Image Lens Magnifier works
A hover lens: a circular, pointer-events-none overlay tracks the clamped cursor; an inner copy of the base image is scaled ~3x (1.5-6) and translated so the pixel under the lens centre lands on the lens centre; a shared CSS transform transition gives the follower a short lag with zero JS animation loop; leaving fades the lens out. The lens ring is rendered as a box-shadow so it stays crisp on the rounded clip while following, and the magnified layer opts into will-change transform to avoid shimmer. The default preview image is a supplied lava artwork URL shared by the base image and the magnified layer.
Technical information for Image Lens Magnifier
| Category | Image Interactions |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| State change | pristine image, no lens to circular lens tracks the pointer, magnifying the region beneath it |
| Props | 10 configurable |
| Usage example | Not published yet |
What Image Lens Magnifier requires
- POINTER-follow with clamped lens position
- magnified inner layer pinned under lens centre
- ResizeObserver sizing, disconnected on unmount
- no state writes per pointer frame
- prefers-reduced-motion disables the easing transition
- lens ring is a box-shadow (crisp on rounded clip, no dotted edge)
- lens + inner layers use will-change transform to prevent shimmer
- default preview image URL is shared by the base <img> and the lens background layer
Image Lens Magnifier questions
What is Image Lens Magnifier?
A hover-following circular lens that magnifies an image region up to 6x with zero per-frame state.
How does Image Lens Magnifier work?
A hover lens: a circular, pointer-events-none overlay tracks the clamped cursor; an inner copy of the base image is scaled ~3x (1.5-6) and translated so the pixel under the lens centre lands on the lens centre; a shared CSS transform transition gives the follower a short lag with zero JS animation loop; leaving fades the lens out. The lens ring is rendered as a box-shadow so it stays crisp on the rounded clip while following, and the magnified layer opts into will-change transform to avoid shimmer. The default preview image is a supplied lava artwork URL shared by the base image and the magnified layer.
Which category does Image Lens Magnifier belong to?
Image Lens Magnifier is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the image prop do in Image Lens Magnifier?
Source image { src, alt? } to magnify. It defaults to IMAGE_LENS_DEFAULTS.image.
What does the zoom prop do in Image Lens Magnifier?
Magnification power, clamped 1.5-6. It defaults to 3.
Is Image Lens Magnifier free to use?
Image Lens Magnifier is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Image Lens Magnifier use?
Image Lens Magnifier uses React and is styled with Tailwind CSS.
What does Image Lens Magnifier need to run?
Image Lens Magnifier needs POINTER-follow with clamped lens position, magnified inner layer pinned under lens centre, ResizeObserver sizing, disconnected on unmount and no state writes per pointer frame.