Image Zoom

Component 1

About

An image component that lets users zoom into details on hover or click, with touch support for mobile.

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

import ImageZoom from "@/components/ui/image-zoom";

const getUnsplashHighRes = (originalUrl: string) => {
  try {
    const urlObj = new URL(originalUrl);

    // 1. Force High Resolution (2000px is the sweet spot for Zoom)
    urlObj.searchParams.set("w", "2000");

    // 2. Maximize Quality (Unsplash defaults to 80, we want 90+ for zoom)
    urlObj.searchParams.set("q", "95");

    // 3. Ensure we aren't cropping out details unpredictably
    // 'max' ensures it fits within the width without cutting content
    urlObj.searchParams.set("fit", "max");

    return urlObj.toString();
  } catch (e) {
    // Fallback if the string isn't a valid URL
    console.error("Invalid Unsplash URL", e);
    return originalUrl;
  }
};

const baseImageUrl =
  "https://cdn.21st.dev/assets/mirror/39/39e265e5c94814f11ac05fe669a8447affd47e6e77d1ed835f02d60a128636d0.jpg";
const zoomSrc = getUnsplashHighRes(baseImageUrl);

export default function ImageZoomDemo() {
  return (
    <div className="w-full h-screen flex justify-center items-center">
      <div className="relative max-w-xl mx-auto">
        <ImageZoom src={baseImageUrl} zoomSrc={zoomSrc} zoomType="click" />
      </div>
    </div>
  );
}