HoverRevealCard
A dual-state card that swaps between two images and texts on hover, creating a smooth reveal effect for interactive previews or before-and-after showcases.
Make it with Workshop
Build your own component with AI
About this Component
The HoverSwapCard component displays a dual-state visual card that changes its content when hovered. It accepts two images and two text inputs - one pair for the default state, and another for the hover state. When a user hovers over the card, the first image and text smoothly transition to the second set, creating an interactive reveal effect.
This component is ideal for showcasing before-and-after visuals, product previews, team member profiles, or any scenario where hover interaction enhances visual storytelling.
