View Magnifier

Galleries 56

About

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.

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

Code

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

Usage.tsx

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://cdn.21st.dev/assets/mirror/18/180aeddb291e9b88372e18a495fc8940f025053a79a261ee1ee9fd6bf1ea3a05.jpg" alt="random" fill className="w-full h-full object-cover" />
        </div>
      </Component>
    </div>
  );
}