Shadcn.io is not affiliated with official shadcn/ui
About Image Overlay
An image overlay card block for React and Next.js with a placeholder visual area, overlaid tagline and description text, a CTA button, and smooth fade entrance animations built with shadcn/ui and Tailwind CSS
Create visual impact with this image overlay card block for React and Next.js. Features a large placeholder visual area with a centered image icon, overlaid tagline and description text positioned at the bottom with a background fade, and a call-to-action button. Built with TypeScript, shadcn/ui Button component, motion/react entrance animations, and Tailwind CSS. Perfect for company about pages, creative agency portfolios, and brand story landing sections.
Related Components
Bold Statement
Dramatic statement with word animations
Video Split
Video content with text split
Alternating
Zigzag image and text layout
Two Column
Side-by-side text and visual
Photo Gallery
Team or office photo gallery
Gradient Headline
Visual headline treatment
FAQ
Was this page helpful?
Sign in to leave feedback.
Hiring Process
A vertical stepper hiring process block for React and Next.js with numbered steps, connecting lines, duration badges, candidate tips, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Impact
An asymmetric bento grid impact metrics block for React and Next.js with featured stat cells, semantic color categories, context lines, computed totals, and staggered scale entrance animations built with shadcn/ui and Tailwind CSS