结论：实现图片悬停放大或遮罩需同时满足 overflow: hidden（父容器）、content: ""（伪元素）、transition 写在常态样式中、transform 优于 width/height、opacity 可过渡而 visibility/display 不可，且须注意移动端 hover 兼容性。
直接说结论：用 :hover 配合 transform: scale() 或 opacity + transition 就能实现图片放大或遮罩，但必须注意父容器的 overflow: hidden、过渡属性写法、以及伪元素层级问题。
图片放大时边缘被裁切？加 overflow: hidden 到父容器
常见现象是鼠标悬停后图片变大，但四边被“切掉”——这是因为默认父容器不约束子元素溢出。放大本质是改变元素渲染尺寸，若父容器没设限制，浏览器会按原尺寸裁剪。
- 给图片外层
<div> 或 <code><figure></figure>加overflow: hidden - 避免对
<img>本身设overflow（无效） - 若用
scale(1.2)，建议父容器留出至少 10% 余量，或用transform-origin: center保证居中缩放 - 遮罩层必须写
content: ""，哪怕为空字符串 - 确保伪元素和图片同级（都挂载在同一个父容器上），且伪元素
z-index> 图片z-index - 推荐用绝对定位：
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 过渡动画要写在伪元素上，比如
transition: opacity 0.3s ease - 放大效果优先用
transform: scale()，比改width/height性能更好，且支持硬件加速 - 遮罩推荐用
opacity控制显隐，而不是visibility或display -
transition必须写在**常态样式里**，不是只写在:hover中；例如：img { transition: transform 0.25s ease; } - 对触发元素加
will-change: transform可提前提示浏览器优化渲染路径 - 如果遮罩层需要响应点击，别给它设
pointer-events: none；反之，若只想让图片响应，遮罩层可加pointer-events: none - 真机测试时注意：iOS Safari 默认无
:hover（仅在首次点击后临时触发），需用@media (hover: hover)做降级
遮罩层不显示？检查 ::before 伪元素的 content 和 z-index
遮罩本质是用伪元素盖在图片上，但很多人写了 background-color 却没出现——因为 ::before 和 ::after 必须有 content 才能渲染。
transition 不生效？只对可动画 CSS 属性起作用
不是所有 CSS 属性都能过渡。比如 display: none → block 不会渐变，visibility 也不支持过渡，但 opacity 和 transform 可以。
移动端点透或响应迟钝？加 will-change: transform 并慎用 pointer-events
部分安卓 WebView 或旧版 Safari 在 hover 动画中会出现卡顿或点透（点击穿透到下层），尤其配合伪元素遮罩时。
最常被忽略的是 content: "" 和 overflow: hidden 这两个硬性前提——缺一不可，否则效果根本不会出来，而不是“效果不好”。
