Components
View Magnifier
A dynamic image magnifier component that creates an interactive zoom effect on hover. Features customizable magnification level, smooth transitions, and responsive behavior for enhanced image viewing experience.
import { Component } from "@/components/ui/view-magnifier";
import Image from "next/image";
export default function DemoOne() {
return (
<div className="relative w-full max-w-lg">
<Component>
<div className="h-48 w-full bg-red-500">
<Image src="https://images.unsplash.com/photo-1714328101501-3594de6cb80f?w=500&auto=format&fit=crop" alt="random" fill className="w-full h-full object-cover" />
</div>
</Component>
</div>
);
}