Hover Reveal Card
Image card whose caption slides up to reveal more on hover or focus.
About Hover Reveal Card
Image card whose caption slides up to reveal more on hover or focus.
Hover Reveal Card is a free animated component for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 63 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- image
- hover
- reveal
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/hover-reveal-cardDependencies installed automatically: motion.
Uses: motion-presets, use-reduced-motion, utils.
Usage
import HoverRevealCard from "@/components/chocolate/hover-reveal-card"
export default function Page() {
return <HoverRevealCard />
}