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