An image component that lets users zoom into details on hover or click, with touch support for mobile.
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>
);
}
Part of Systaliko UI — browse the full library on 21st.dev.