hover图片放大时遮罩层错位因transform创建新层叠上下文并继承缩放，应将scale加在容器上、遮罩用absolute定位铺满；transition须写在初始状态而非:hover中；移动端需用@media(hover:hover)隔离或JS切换类名；边缘模糊可加image-rendering优化。
hover时图片放大但遮罩层不跟着缩放
常见现象是transform: scale(1.2)加在图片上，结果遮罩层（比如带文字的::after）也一起放大、错位或透明度异常。根本原因是transform会创建新的层叠上下文，且子元素默认继承父级变换——除非你主动隔离。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
transform和transition只加在图片容器（如<div class="img-wrap">）上，图片和遮罩都作为其子元素，各自定位 - 遮罩层用
position: absolute+top/left: 0铺满容器，不加任何transform - 图片设
display: block防底部留白，同时加transition: transform 0.3s ease（注意：只写transform，别写all，否则可能触发重排）
transition失效：鼠标移入没动画，或只动一次
典型错误是给:hover状态加transition，但初始状态没声明可过渡属性。CSS过渡必须“起点有值、终点有变、中间有过渡定义”，三者缺一不可。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 过渡属性必须写在**非:hover的初始选择器里**，比如
.img-wrap img { transform: scale(1); transition: transform 0.3s ease; } -
:hover里只改值：.img-wrap:hover img { transform: scale(1.2); } - 避免用
display: none控制遮罩显隐——它无法过渡；改用opacity: 0+visibility: hidden组合
移动端hover不触发，点击后卡住
真机上:hover在iOS/Android多数浏览器中仅模拟一次（点一下激活），之后不响应，甚至遮罩残留。这不是bug，是触摸设备的交互逻辑限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (hover: hover) and (pointer: fine)包裹纯:hover样式，排除触屏设备 - 触屏场景改用
:active临时态，或加JS监听touchstart/touchend切换类名 - 如果必须兼顾，遮罩层加
pointer-events: none，避免遮挡下层图片的点击穿透
transform放大导致边缘锯齿或模糊
特别是Chrome和Safari，scale()超过1.0后容易出现亚像素渲染问题，图片边缘发虚、文字遮罩变毛。这不是代码写错，是GPU加速渲染的副作用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
image-rendering: -webkit-optimize-contrast（WebKit）和image-rendering: crisp-edges（Firefox） - 放大时强制开启硬件加速：
transform: scale(1.2) translateZ(0)，但注意别滥用，可能引发内存占用升高 - 更稳妥的做法是用
zoom替代（仅IE/Edge支持），或直接切两套图，用background-size: cover配合background-position微调
真正难的是让放大中心始终对准鼠标位置，而不是固定居中——这得靠JS算偏移，CSS原生做不到。很多方案看似简洁，其实悄悄绕开了这个需求。
