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.

zoom-effect.tsx

"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
3D Cube - happy face3D Cube - Happy Face
$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:

PropertyTypeDefaultDescription
childrenReactNode-The content to be magnified
zoomScalenumber2Magnification scale (1.5x, 2x, 3x, etc.)
lupaSizenumber100Size of the magnifying lens in pixels
durationnumber300Animation duration in milliseconds
classNamestring""Additional CSS classes for the content
containerClassNamestring""Additional CSS classes for the container
lupaBorderWidthnumber2Border width of the magnifying lens in pixels
lupaBorderColorstring"rgba(255, 255, 255, 0.8)"Border color of the magnifying lens
enableShadowbooleantrueWhether to show shadow around the lens
shadowColorstring"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