INFINITYUI
HomeComponentsDocsTemplates
Star

Getting Started

  • Introduction
  • Installation
  • CLI
  • Audit

Navigation

  • Spotlight Navbar
  • Glass DockNEW
  • Animated Tab Bar
  • Circle Menu
  • Magnet Tabs
  • Animated Sidebar
  • Apple Spotlight
  • Page TOC RailNEW

Text

  • Flip Text
  • Glitch Text
  • Liquid Text
  • Flip Fade Text
  • Mask Cursor Effect

Cards

  • Glow Border Card
  • Testimonials Card
  • Interactive Book
  • Trading CardsNEW
  • Hover Image
  • Chain of ThoughtNEW
  • Masonry Grid
  • Image Pile
  • Staggered Grid

Inputs

  • AI InputNEW
  • OTP Input
  • Leave Rating

Buttons

  • Social Flip Button
  • Creepy Button

Loaders

  • Jelly Loader
  • Rolling Ball Scroll
  • Glowing Scroll

Backgrounds

  • Light Lines
  • Perspective Grid
  • Liquid Ocean
  • Eagle Vision
  • Flow Scroll
  • Horizontal Scroll

Overlays

  • PersonaNEW
  • Infinite Moving Cards
  • Masked Avatars
  • Stacked Logos
  • Icon Wheel
  • Pixelated CarouselNEW
  • Pixelated Image Trail
  • Flip Scroll
  • Interactive Folder
  • Animated Folder IconNEW
  • Stack Scroll
  • Rubik Cube
Cards

Hover Image

#hover#image#gallery
Mountain
Mountain Vista
Valley
Forest Valley
Ocean
Ocean Waves
Forest
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>
    );
}