← Back to Prompts
Display

Hover Reveal Card

A card that reveals hidden content or a larger image with a smooth hover expansion.

by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a card component with a hover reveal effect. The card should show a title and category by default, with a background image or color at partial opacity. On hover, the card expands slightly, the image opacity increases, and additional details (description + link) slide up from the bottom. Use CSS transitions, overflow hidden, and transform. Use Tailwind CSS. The image can be a placeholder gradient or solid color block.
Chinese Prompt
创建一个带悬停揭示效果的卡片组件。默认显示标题和分类,背景图片或颜色为部分透明度。悬停时卡片轻微放大,图片透明度增加,额外详情(描述 + 链接)从底部滑上。使用 CSS transitions、overflow hidden 和 transform。使用 Tailwind CSS。图片可用占位渐变或纯色块。
Hover Reveal Card screenshot 1
## Overview An interactive card that rewards hover with more information. Common in portfolios, editorial grids, and product showcases. ## Features - Default title + category - Background image/color - Hover scale expansion - Image opacity increase - Slide-up details - CSS transitions ## Usage Use for project cards, blog posts, or product collections where hover is a signal of interest. ## Customization Modify the prompt to: - Add a directional-aware hover effect - Reveal a video instead of static image - Add a grain overlay on hover - Make the whole card clickable