Hover Image Gallery

A responsive image viewer that changes the visible image based on the horizontal mouse position, and enhanced with a glassmorphic tooltip. Perfect for showcasing art collections, product galleries, or any visual content where immersive user interaction matters.

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

"use client";

import { HoverImageGallery } from "@/components/ui/hover-image-gallery";

export function Demo() {
  return (
    <div className="min-h-screen overflow-hidden flex flex-col items-center justify-center">
      <HoverImageGallery />
      <p className="mt-10">Hover over the images</p>
    </div>
  );
}