Components
Image Zoom
A component that lets users click or tap an image to zoom in with a blurred backdrop and smooth transitions.
"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://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80"
unoptimized
width={1200}
/>
</ImageZoom>
</div>
);
export default Example;