Search blocks by description or jump to a page.
A card that hides extra text or actions until hover uncovers them. Use it for portfolio tiles or features where the cover stays clean until needed.
Hover Reveal Card shows two distinct layers inside a single card. The resting state displays a title, a short description, and a paragraph of body text. When a pointer moves over the card, a second panel slides up from the bottom to cover the first, bringing a new heading, a follow-up message, and a full-width action button. The transition is a smooth vertical slide, so the switch between layers feels intentional rather than abrupt.
Both layers are independent of each other. The resting copy, the reveal copy, the button label, and the button destination are all plain text you can rewrite without touching the animation logic. The card fits anywhere a fixed-width tile is needed, and the overlay appears only on pointer interaction, so mobile visitors see the resting state by default.
Reach for this block on a candidates page, a job listing grid, or a team directory on an HR and hiring platform where a tile needs to stay tidy at a glance but also surface a quick action. The reveal keeps the grid clean while still giving a recruiter or applicant a direct path to apply, shortlist, or schedule. It works better than a static card with buttons always visible because the action stays out of the way until the reader shows intent.
A natural flow around it on a Components page:
Before
After
The card suits any situation where a concise front face should give way to a focused call to action on demand. A few concrete fits:
Tip: keep the reveal panel copy shorter than the resting copy so the button stays prominent and the reader acts rather than reads again.