Animated card with gesture animations, that reveal hidden content and scale main image on hover
import { CardHoverReveal, CardHoverRevealMain, CardHoverRevealContent} from "@/components/ui/reveal-on-hover"
export const CardHoverRevealDemo = () => (
<CardHoverReveal className="h-[512px] w-[385px] rounded-xl">
<CardHoverRevealMain>
<img
width={1077}
height={606}
alt="product image"
src="https://cdn.21st.dev/assets/mirror/7e/7e03b03cfce269f25d9b19b76166eab14eb78c8b5e077058bd78a6e1ad6f04ea.jpg"
className="inline-block size-full max-h-full max-w-full object-cover align-middle"
/>
</CardHoverRevealMain>
<CardHoverRevealContent className="space-y-4 rounded-2xl bg-zinc-900/75 text-zinc-50">
<div className="space-y-2">
<h3 className="text-sm text-opacity-60">Services</h3>
<div className="flex flex-wrap gap-2 ">
<div className=" rounded-full bg-zinc-800 px-2 py-1">
<p className=" text-xs leading-normal">Branding</p>
</div>
<div className=" rounded-full bg-zinc-800 px-2 py-1">
<p className=" text-xs leading-normal">UI UX</p>
</div>
</div>
</div>
<div className="space-y-2">
<h3 className=" text-sm text-opacity-60">Stack</h3>
<div className="flex flex-wrap gap-2 ">
<div className=" rounded-full bg-[hsl(18,56%,32%)] px-2 py-1">
<p className=" text-xs leading-normal">Figma</p>
</div>
<div className=" rounded-full bg-[hsl(18,56%,32%)] px-2 py-1">
<p className=" text-xs leading-normal">Webflow</p>
</div>
</div>
</div>
<div className="space-y-2">
<h3 className=" text-sm text-opacity-60">Profile</h3>
{/* tag */}
<div className="flex flex-wrap gap-2 ">
<p className="text-sm text-card">
Comprehensive platform designed for an agency, Creating professional
and business-oriented brand.
</p>
</div>
</div>
</CardHoverRevealContent>
</CardHoverReveal>
)Part of Systaliko UI — browse the full library on 21st.dev.