Image Zoom

Component

About

A component that lets users click or tap an image to zoom in with a blurred backdrop and smooth transitions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Zoom to your project and fits it to your theme.

Code

How Image Zoom is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ImageZoom } from "@/components/ui/image-zoom";
import Image from "next/image";

const Example = () => (
  <div className="flex items-center justify-center p-8">
    <ImageZoom>
      <Image
        alt="Mountain landscape"
        className="h-auto w-96 rounded-lg"
        height={800}
        src="https://cdn.21st.dev/assets/mirror/0e/0ee161e83761345500c7bb679dc5c8094d9e26070ffd6943d1592ec7b61b9e8f.jpg"
        unoptimized
        width={1200}
      />
    </ImageZoom>
  </div>
);

export default Example;