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。图片可用占位渐变或纯色块。

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