纯 CSS 实现鼠标悬停图片放大效果的关键是：transition 必须写在 img 常态样式中且仅限 transform 和 opacity，配合 transform-origin: center 与父容器 overflow: hidden + 明确宽高，缺一不可。
纯 CSS 实现鼠标悬停图片放大渐变效果，关键不是“渐变”本身，而是让 transform: scale() 和 transition 协同工作——缩放是位移变化，所谓“渐变”实为平滑过渡动画，不是颜色渐变。
为什么只写 img:hover { transform: scale(1.2); transition: all 0.3s; } 会出问题
常见错误现象包括：首次悬停无动画、图片突然跳动、旁边文字被顶开、移动端完全没反应。根本原因有三个：
-
transition必须写在常态样式里（比如img或.img-wrapper img），不能只写在:hover中，否则浏览器没有初始状态可过渡 - 只写
transition: all会触发 layout、paint 等高开销操作，尤其当图片带width/height变化时，动画卡顿甚至失效 - 没设
transform-origin: center，scale()默认以左上角为原点，放大后图片向右下“滑出”，视觉上像抖动或偏移
必须加的三处容器与图片样式
仅靠 img:hover { transform: scale(1.2) } 永远无法稳定生效。以下结构缺一不可：
- 用一个
<div class="img-wrapper"><img alt="如何用CSS实现鼠标悬停时图片的放大渐变效果？" ></div>包裹图片，该div必须有明确宽高（如width: 300px; height: 200px;），不能是height: auto -
.img-wrapper { overflow: hidden; }—— 必须加在**直接父容器**上，加在更外层无效；否则放大后边缘溢出，可能撑开布局或出现滚动条 -
img元素需设：display: block（消除行内默认基线留白）、object-fit: cover（防拉伸）、transform-origin: center（确保中心缩放）
transition 写在哪？怎么写才不翻车
正确写法是把 transition 放在图片常态样式中，并且只声明可硬件加速的属性：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
img { transition: transform 0.3s ease, opacity 0.3s ease; } - ❌ 错误：
img:hover { transition: transform 0.3s; }（首次无动画） - ❌ 错误：
img { transition: all 0.3s; }（可能触发重排，尤其在 flex/grid 容器中） - ⚠️ 注意：
opacity加进来不是为了“渐变色”，而是预防某些浏览器在缩放时因图层合成异常导致的闪烁，属于稳妥做法
移动端点击放大怎么处理才合理
iOS Safari 和多数安卓 Chrome 默认不响应 :hover，点一下才触发、再点一下才取消，体验断裂。务实方案只有两个：
- 用媒体查询隔离鼠标设备：
@media (hover: hover) and (pointer: fine) { .img-wrapper:hover img { transform: scale(1.15); } } - 对触屏设备降级为
:active点击态：@media (hover: none) { .img-wrapper:active img { transform: scale(1.1); } }，注意这仅支持单次点击，无法保持放大 - 别依赖
@media (hover: hover)自动 fallback —— 很多安卓机返回hover: none却仍部分响应 hover，行为不一致
真正容易被忽略的是 transform-origin 和 overflow: hidden 的绑定关系：它们不是“增强体验”的可选项，而是让 scale() 在固定框内稳定工作的最小必要组合。少一个，效果就从“精致悬停”退化成“布局抖动”。
