跳到正文

图片悬停放大露出说明

Image Hover Zoom & Caption

初级网页

作品集、商品列表里最常见的效果：鼠标移到一张图上，图片在框内缓慢放大，底部的渐变遮罩里滑出标题和说明。平时画面干净，想了解时信息才出现。

你可能会说：「作品集的图片墙能不能做成鼠标移上去图片稍微放大，底下再浮出标题和简介？」

效果预览

正在加载演示…

怎么做

  1. 1

    外框裁切，图片和说明叠在里面

    外框负责裁切（overflow: hidden）和固定比例，图片放大时不会溢出框外。整张卡片用一个链接包住，键盘也能聚焦到它。

    查看代码html
    <a class="zoom-card" href="/works/budget-app">
  <img class="zoom-card__img" src="/works/budget-app.jpg" alt="记账 App 改版">
  <div class="zoom-card__caption">
    <h3>记账 App 改版</h3>
    <p>移动端 · 2026</p>
  </div>
</a>
  2. 2

    悬停时放大图片、滑出说明

    图片用 transform: scale 放大，时长稍长（0.6~0.8 秒）显得从容；说明平时被推到框外，悬停或键盘聚焦时滑回来。说明背后垫一层从透明到深色的渐变，白字放在任何图片上都看得清。

    查看代码css
    .zoom-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
}
.zoom-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zoom-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 14px 12px;
  color: #fff;
  background: linear-gradient(transparent, rgba(2, 6, 23, 0.85));
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.zoom-card:hover .zoom-card__img,
.zoom-card:focus-visible .zoom-card__img { transform: scale(1.08); }
.zoom-card:hover .zoom-card__caption,
.zoom-card:focus-visible .zoom-card__caption { transform: none; }
  3. 3

    触屏常驻显示，减少动效时不放大

    手机没有悬停，说明会一直藏着，所以在不支持悬停的设备上让说明常驻。开启减少动效时去掉放大，只保留说明的显示。

    查看代码css
    @media (hover: none) {
  .zoom-card__caption { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-card__img { transition: none; }
  .zoom-card:hover .zoom-card__img { transform: none; }
}

适合放在哪

适合用

  • 作品集、案例展示的图片网格。
  • 电商、课程列表的封面卡片，悬停时露出价格或简介。
  • 博客文章列表的封面图。

不适合用

  • 说明里有用户必须看到的信息（价格、库存）时，别只在悬停时显示；平时就要能看到。
  • 图片本身是要仔细看的内容（比如商品细节）时，别默认用遮罩盖住一部分。
  • 一屏只有一两张大图时，放大效果不明显，没必要加。

让 AI 帮你做

请给【图片卡片网格，如：作品集页的项目列表】加上悬停放大并露出说明的效果。先阅读卡片组件和样式写法，确认图片比例、标题和说明字段。要求：外框固定比例并 overflow: hidden；悬停或键盘聚焦时图片 scale 到约 1.08，过渡 0.6~0.8 秒；说明放在底部渐变遮罩里，平时移出框外、悬停时滑入；不支持悬停的设备上说明常驻显示；开启减少动效时不放大；整张卡片可通过键盘聚焦。沿用现有组件，不改无关代码。最后说明怎样在桌面、手机和键盘操作下分别验证。

用到的知识

悬停图片内容溢出过渡