Display
悬停揭示卡片
悬停时平滑展开并揭示隐藏内容或更大图片的卡片。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
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.
中文提示词
创建一个带悬停揭示效果的卡片组件。默认显示标题和分类,背景图片或颜色为部分透明度。悬停时卡片轻微放大,图片透明度增加,额外详情(描述 + 链接)从底部滑上。使用 CSS transitions、overflow hidden 和 transform。使用 Tailwind CSS。图片可用占位渐变或纯色块。

Overview
通过悬停奖励用户提供更多信息的交互卡片。常见于作品集、编辑网格和产品展示。
Features
- 默认标题 + 分类
- 背景图片/颜色
- 悬停缩放展开
- 图片透明度增加
- 底部滑上详情
- CSS transitions
Usage
适用于项目卡片、博客文章或产品集合,悬停表示兴趣。
Customization
修改 prompt 以:
- 添加方向感知悬停效果
- 揭示视频而非静态图片
- 悬停时添加颗粒叠加
- 让整个卡片可点击