图片悬停放大 5 种特效（缩放/旋转/模糊/遮罩 CSS 源码）

效果演示（真实可交互）

把鼠标移到下方卡片上，体验 5 种不同的图片悬停放大效果。示例使用渐变占位图演示，实际项目中替换为真实图片即可。

完整代码

HTML 结构：每个 figure 是一张图片卡片，.img 为图片容器，.cap 为遮罩模式下的文字层：

<figure class="z-card">
  <div class="img i-scale"><span>🏔️</span></div>
  <figcaption>① 平滑缩放 1.2x</figcaption>
</figure>
<!-- 换用 i-rotate / i-blur / i-overlay / i-pan 即可切换效果 -->

核心 CSS：

.img {
  aspect-ratio: 4 / 3;              /* 固定比例，防止布局抖动 */
  border-radius: 12px;
  overflow: hidden;                 /* 关键：裁剪放大部分 */
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* ① 平滑缩放 */
.z-card:hover .i-scale { transform: scale(1.2); }

/* ② 缩放 + 旋转 */
.z-card:hover .i-rotate { transform: scale(1.2) rotate(6deg); }

/* ③ 模糊 → 锐化：默认模糊，悬停清晰 */
.i-blur { filter: blur(5px); transform: scale(1.06); }
.z-card:hover .i-blur { filter: blur(0); transform: scale(1); }

/* ④ 遮罩变暗 + 文字上浮 */
.i-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(15, 17, 23, .55);
  opacity: 0;
  transition: opacity .4s ease;
}
.cap {
  position: absolute; z-index: 1;
  color: #fff; font-size: 15px; font-weight: 600;
  opacity: 0; transform: translateY(14px);
  transition: all .4s ease;
}
.z-card:hover .i-overlay::after { opacity: 1; }
.z-card:hover .cap { opacity: 1; transform: translateY(0); }

/* ⑤ 平移视差：内层放大，悬停回缩露出全貌 */
.i-pan span { transform: scale(1.25); }
.z-card:hover .i-pan span { transform: scale(1); }

参数说明

兼容性与性能

• 全部纯 CSS，无任何 JS 依赖，Chrome / Firefox / Safari / Edge 现代版本均可运行
• 只对 transform 和 filter 做动画，这两个属性由 GPU 合成，性能开销小
• 注意 aspect-ratio 需 Chrome 88+ / Safari 15+，老旧浏览器可用 padding-top 百分比技巧替代
• filter 动画在低端设备上开销略大，若帧率不足可去掉模糊效果只保留缩放

常见问题

Q: 项目里是真实图片，直接替换就行吗？ 把 .img 换成 <img> 标签并设置 width: 100%; height: 100%; object-fit: cover;，其余 CSS 不变。

Q: 移动端没有 hover，怎么办？ 触屏设备上首次点击会触发 hover 态，体验尚可；如需专门的手势放大，建议配合 JS 的点击/触摸事件实现。

Q: 可以商用吗？ 可以，本组件为粤喵自研原创，免费商用无需署名，也欢迎按需修改。

Q: 图片是长图，比例会变形吗？ 不会，容器固定 aspect-ratio 后用 object-fit: cover 裁切，长图会居中裁掉多余部分。