Zoom Effect
FREE
A magnifying glass hover effect with circular zoom lens
Demo
Zoom Effect
Hover to see the magnifying glass effect
Detail 1
Detail 2
Detail 3
Detail 4
Installation
1
Copy and paste the following code into your project.
Add this component zoom-effect.tsx to your project.
"use client"
import type React from "react"
import { useState, useRef, type ReactNode } from "react"
import { cn } from "~/lib/utils"
interface ZoomEffectProps {
children: ReactNode
zoomScale?: number
lupaSize?: number
duration?: number
className?: string
containerClassName?: string
lupaBorderWidth?: number
lupaBorderColor?: string
enableShadow?: boolean
shadowColor?: string
}
export function ZoomEffect({
children,
zoomScale = 2,
lupaSize = 100,
duration = 300,
className = "",
containerClassName = "",
lupaBorderWidth = 2,
lupaBorderColor = "rgba(255, 255, 255, 0.8)",
enableShadow = true,
shadowColor = "rgba(0, 0, 0, 0.3)",
}: ZoomEffectProps) {
const [isHovered, setIsHovered] = useState(false)
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
const containerRef = useRef<HTMLDivElement>(null)
const contentRef = useRef<HTMLDivElement>(null)
const handleMouseEnter = () => {
setIsHovered(true)
}
const handleMouseLeave = () => {
setIsHovered(false)
}
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!containerRef.current) return
const rect = containerRef.current.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top
setMousePosition({ x, y })
}
return (
<div
ref={containerRef}
className={cn("relative overflow-hidden", containerClassName)}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onMouseMove={handleMouseMove}
>
<div ref={contentRef} className={cn("relative h-full", className)}>
{children}
</div>
{isHovered && (
<div
className="absolute pointer-events-none z-10"
style={{
width: `lupaSizepx`,
height: `lupaSizepx`,
borderRadius: "50%",
border: `lupaBorderWidthpx solid lupaBorderColor`,
boxShadow: `enableShadow ? "0 0 10px shadowColor" : "none"`,
overflow: "hidden",
top: `mousePosition.y - lupaSize / 2`,
left: `mousePosition.x - lupaSize / 2`,
transition: `box-shadow durationms ease`,
}}
>
<div
className="absolute"
style={{
width: `containerRef.current?.offsetWidth`,
height: `containerRef.current?.offsetHeight`,
transform: `scale(zoomScale)`,
transformOrigin: `mousePosition.xpx mousePosition.ypx`,
top: -mousePosition.y + lupaSize / 2,
left: -mousePosition.x + lupaSize / 2,
}}
>
<div className={cn("relative h-full", className)}>{children}</div>
</div>
</div>
)}
</div>
)
}
2
Start using the component ZoomEffect in your project.
Exclusive Launch 50% offspots left: 0 / 50


$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Usage Example
// Basic zoom effect on an image
<ZoomEffect className="w-96 h-64">
<img
src="/your-image.jpg"
alt="Zoomable content"
className="w-full h-full object-cover rounded-lg"
/>
</ZoomEffect>
// ------------------------------------------------------------
// Custom zoom with blue border
<ZoomEffect
zoomScale={3}
lupaSize={150}
lupaBorderColor="rgba(59, 130, 246, 0.8)"
enableShadow={true}
containerClassName="w-[500px] h-[400px]"
>
<div className="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg p-6">
<h2 className="text-white text-2xl font-bold">Detailed Content</h2>
<p className="text-white/80 mt-2">Hover to magnify and see details</p>
</div>
</ZoomEffect>
// ------------------------------------------------------------
// Fast animation with large magnifier
<ZoomEffect
zoomScale={2.5}
lupaSize={200}
duration={150}
lupaBorderWidth={3}
shadowColor="rgba(0, 0, 0, 0.5)"
>
<div className="p-8 bg-gray-100 rounded-lg">
<h3 className="text-lg font-semibold mb-4">Product Details</h3>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>Feature 1</div>
<div>Feature 2</div>
<div>Feature 3</div>
<div>Feature 4</div>
</div>
</div>
</ZoomEffect>
// ------------------------------------------------------------
// Subtle zoom without shadow
<ZoomEffect
zoomScale={1.5}
lupaSize={80}
enableShadow={false}
lupaBorderColor="rgba(255, 255, 255, 0.6)"
lupaBorderWidth={1}
>
<div className="text-center p-4">
<p>Hover for subtle magnification</p>
</div>
</ZoomEffect>
Properties
The ZoomEffect
component accepts the following props:
Property | Type | Default | Description |
---|---|---|---|
children | ReactNode | - | The content to be magnified |
zoomScale | number | 2 | Magnification scale (1.5x, 2x, 3x, etc.) |
lupaSize | number | 100 | Size of the magnifying lens in pixels |
duration | number | 300 | Animation duration in milliseconds |
className | string | "" | Additional CSS classes for the content |
containerClassName | string | "" | Additional CSS classes for the container |
lupaBorderWidth | number | 2 | Border width of the magnifying lens in pixels |
lupaBorderColor | string | "rgba(255, 255, 255, 0.8)" | Border color of the magnifying lens |
enableShadow | boolean | true | Whether to show shadow around the lens |
shadowColor | string | "rgba(0, 0, 0, 0.3)" | Shadow color around the lens |
How It Works
- 🔍 Mouse Tracking: Follows mouse movement within the container
- 🎯 Circular Lens: Creates a circular magnifying glass effect
- 📐 Transform Origin: Uses the mouse position as the zoom center
- 🖼️ Content Cloning: Duplicates content inside the lens with zoom applied
- ⚡ Smooth Transitions: Configurable animation duration
- 🎨 Customizable Appearance: Border, shadow, and size options
Usage Examples
Image Magnifier
🎨
Artwork Details
Text Magnifier
Fine Print Document
This is very small text that might be hard to read without magnification. The zoom effect helps users examine details.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Chart Details
Product Inspector
⚡
Premium Product
Examine product details
Spec 1
Spec 2