悬停揭示卡片（Hover Reveal Card）是什么：效果预览与 AI 设计提示词

效果预览

星野民宿品牌升级

从标志到空间导视的完整视觉系统，历时 3 个月。

适合用在哪

作品集、案例墙、团队介绍、文章列表；列表页的二次交互。

容易踩的坑

max-height 0→auto 无法过渡，必须写具体数值或改用 grid-template-rows 0fr→1fr。
揭示内容只在 :hover 出现，键盘聚焦时看不到，应同时响应 :focus-within。
图片 scale 放大后未限制在容器内，相邻卡片被溢出的图片覆盖。

设计提示词 · Prompt

悬停揭示卡片（Hover Reveal Card）：卡片 overflow:hidden，底层封面图悬停时 scale 1→1.07 缓放 500ms；上层是绝对定位的渐变遮罩（linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85))），遮罩默认 translateY(28-35%) 只露出标题，悬停归位；描述文字用 opacity 0→1 + max-height 0→auto 双重过渡（延迟 50ms）。所有过渡统一 cubic-bezier(.32,.72,0,1)。移动端没有 hover，改为常显完整信息。

Hover Reveal Card: the card has overflow:hidden; the underlying cover image slowly scales 1→1.07 over 500ms on hover. On top is an absolutely positioned gradient overlay (linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85))), which by default is translateY(28-35%) so only the title shows, and returns to place on hover; the description uses a dual transition of opacity 0→1 + max-height 0→auto (50ms delay). All transitions share cubic-bezier(.32,.72,0,1). On mobile there's no hover, so always show the full information.

常见搭配

同一页面里经常和「悬停揭示卡片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

画廊网格Image Gallery Grid 悬停放大图Hover Zoom 渐变蒙层图Gradient Overlay Image 筛选标签Filter Chips

演示 HTML 结构

<div class="s d-reveal">
  <div class="d-reveal__img"></div>
  <div class="d-reveal__ov">
    <b>星野民宿品牌升级</b>
    <p>从标志到空间导视的完整视觉系统，历时 3 个月。</p>
  </div>
</div>