Reveal on hover

Cards 283

About

Animated card with gesture animations, that reveal hidden content and scale main image on hover

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reveal on hover to your project and fits it to your theme.

Code

How Reveal on hover is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
)