Image Zoom

Image zoom is a component that allows you to zoom in on an image.

Installation

npx love-ui@latest add image-zoom

Usage

import { ImageZoom } from "@/components/image-zoom"

<ImageZoom>
  <img src="/image.jpg" alt="Zoomable image" />
</ImageZoom>

Features

Zoom in on images with a click or tap
Customizable zoom button appearance and position
Smooth transitions for zooming in and out
Customizable backdrop with blur effect
Support for both controlled and uncontrolled zoom states
Accessible keyboard navigation
Touch-friendly for mobile devices
Customizable styling through className props
Reduced motion support for animations
Works with any image, SVG, or element with role="img"

Examples

Custom backdrop

"use client";

import { ImageZoom } from "../../../../../packages/image-zoom";
import Image from "next/image";
import { cn } from "@/lib/utils";

const Example = () => (
  <ImageZoom
    backdropClassName={cn(
      '[&_[data-rmiz-modal-overlay="visible"]]:bg-black/80'
    )}
  >
    <Image
      alt="Placeholder image"
      className="h-auto w-96"
      height={800}
      src="https://placehold.co/1200x800"
      unoptimized
      width={1200}
    />
  </ImageZoom>
);

export default Example;

Custom margin

"use client";

import { ImageZoom } from "../../../../../packages/image-zoom";
import Image from "next/image";

const Example = () => (
  <ImageZoom zoomMargin={100}>
    <Image
      alt="Placeholder image"
      className="h-auto w-96"
      height={800}
      src="https://placehold.co/1200x800"
      unoptimized
      width={1200}
    />
  </ImageZoom>
);

export default Example;

Image Crop Glimpse