容器内悬停缩放 Image Zoom Hover

图片在鼠标悬停时平滑放大，配合 overflow: hidden 裁剪容器。

实时预览

代码

css

.zoom-box {
  width: 300px; height: 200px;
  overflow: hidden; border-radius: 10px;
}
.zoom-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.zoom-box:hover .zoom-img { transform: scale(1.15); }

html

<div class="zoom-box">
  <img class="zoom-img" src="image.jpg" alt="">
</div>

纯 CSS 实现的悬停缩放图片动画——通过滤镜、变换和遮罩让图片在悬停或滚动时产生视觉效果。适用于商品图、相册、文章插图等场景。

快速使用

复制 CSS 代码到你的样式文件中
在图片外层包裹一个带 overflow: hidden 的容器
给图片添加对应的 class 名称
调整缩放比例、模糊半径等参数

使用场景

商品图/相册：悬停缩放让用户看清细节，模糊切换增加浏览趣味
文章插图：视差滚动让图片和文字有不同的滚动层次
用户头像：灰度到彩色的过渡展示在线/离线状态或会员身份
卡片封面图：遮罩揭示或倾斜让静态封面有动态交互感

常见问题

Q: 图片缩放动画会影响图片清晰度吗？ A: transform: scale() 在合成层执行，图片先以原始分辨率渲染再缩放——放大时可能出现轻微模糊。建议初始加载比容器稍大的图片，缩放时只做缩小操作。或者用 image-rendering 优化。

Q: 如何让图片懒加载配合动画？ A: 使用 loading="lazy" 原生懒加载。图片加载完成前可以用 CSS 骨架屏或模糊占位（filter: blur(20px)），加载完成后添加 .loaded 类触发 blur→0 过渡。

Q: 滤镜动画（grayscale/blur）的性能如何？ A: filter 由 GPU 处理，性能较好。但 blur() 半径越大，GPU 开销越大。建议 blur 半径不超过 20px，并且在动画完成后移除/简化 filter。IE 不支持 filter，需降级。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持（注意 filter 性能）
移动端浏览器	✅ 完全支持
IE 11	❌ filter 和高级 transform 不支持

使用说明

属性	说明
`overflow: hidden`	容器裁剪放大的图片
`transform: scale(1.15)`	放大至 115%
`transition: 0.4s ease`	平滑过渡
`object-fit: cover`	保持图片比例填充容器

容器内悬停缩放 Image Zoom Hover ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐