Zoom Effect

A magnifying glass hover effect with circular zoom lens

Demo

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:

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

Features

• ✨ Real-time Magnification: Instant zoom that follows mouse movement
• 🎨 Customizable Lens: Control size, border, and shadow
• 📐 Adjustable Zoom: Set any zoom scale from 1.1x to 5x+
• 🖱️ Smooth Interaction: Responsive mouse tracking
• 🎯 Pixel Perfect: Accurate positioning and scaling
• 📱 Touch Friendly: Works on touch devices
• 🚀 Performance Optimized: Efficient rendering and updates

Use Cases

• 🖼️ Image Galleries: Detailed view of high-resolution images
• 📊 Data Visualization: Examine charts and graphs closely
• 🗺️ Maps and Diagrams: Zoom into specific areas
• 📝 Text Documents: Read fine print or small text
• 🎨 Design Reviews: Inspect design details and elements
• 🔬 Scientific Images: Analyze microscopic or detailed imagery

Usage Examples

Performance Notes

• ✅ Efficient Rendering: Only renders magnified content when hovering
• ✅ Smooth Animations: Uses CSS transforms for optimal performance
• ✅ Memory Efficient: Minimal DOM manipulation
• ✅ Event Optimized: Throttled mouse move events
• ⚠️ Complex Content: Performance may vary with highly complex children