Cards

Hover Image

#hover#image#gallery

Mountain Vista

Forest Valley

Ocean Waves

Deep Forest

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/hover-img

Package Dependencies

Install the npm packages used by this component source.

No additional npm packages required.

Component Code

Copy and paste this code into your component file.

tsx

"use client";

import { useState } from "react";

interface HoverImageProps {
    images: Array<{ src: string; alt: string; label?: string }>;
}

export function HoverImage({ images }: HoverImageProps) {
    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

    return (
        <div className="flex items-center justify-center gap-3 flex-wrap">
            {images.map((img, i) => (
                <div
                    key={i}
                    onMouseEnter={() => setHoveredIndex(i)}
                    onMouseLeave={() => setHoveredIndex(null)}
                    className="relative overflow-hidden rounded-2xl cursor-pointer transition-all duration-500"
                    style={{
                        width: hoveredIndex === i ? 280 : hoveredIndex !== null ? 80 : 160,
                        height: 200,
                    }}
                >
                    <img
                        src={img.src}
                        alt={img.alt}
                        className="w-full h-full object-cover transition-transform duration-700 hover:scale-110"
                    />
                    <div
                        className={`absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4 transition-opacity duration-300 ${hoveredIndex === i ? "opacity-100" : "opacity-0"}`}
                    >
                        {img.label && (
                            <span className="text-white font-semibold text-sm">{img.label}</span>
                        )}
                    </div>
                </div>
            ))}
        </div>
    );
}