Hover Flip Card
A 3D flipping card that reveals additional content on hover. Built with CSS transforms and Motion-friendly structure for smooth, interactive effects.
Use it to showcase features, profiles, or product details on the front, with extended descriptions or actions on the back. The card exposes props for height, width, and custom front/back content.
Install using the shadcn CLI to add the flipping card component to your application.
Preview
Hover over each card to flip between the front illustration and the detailed back description.
Family Guy
Family Guy is an American animated sitcom created by Seth MacFarlane for the Fox Broadcasting Company.
Family Guy is an American animated sitcom created by Seth MacFarlane for the Fox Broadcasting Company.
Props
hover-flip-cardProps
- width
- Optional width of the card in pixels. Defaults to
350. - height
- Optional height of the card in pixels. Defaults to
300. - frontContent
- React node rendered on the front face of the card.
- backContent
- React node rendered on the back face of the card.
- className
- Optional className applied to the outer card wrapper for custom styling.