Hover Expand Gallery

Hover expand image gallery accordion: a row of hairline-separated panels with vertical labels, where the hovered or tapped panel grows to reveal its image while the rest stay rail-width. Below 1024px it becomes a vertical accordion. For portfolios and case studies. Pure CSS, no animation library.

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

"use client"

import HoverExpandGallery from "@/components/ui/hover-expand-gallery"

const settings = {
  railWidth: 64,
  maxOpenWidth: 520,
  duration: 620,
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <HoverExpandGallery
      railWidth={s.railWidth}
      maxOpenWidth={s.maxOpenWidth}
      duration={s.duration}
    />
  )
}