图片容器必须设为relative才能定位::after遮罩，因img是替换元素不支持伪元素；需用div等包裹并设position:relative；opacity切换须配合pointer-events控制点击穿透；文字居中推荐transform方案；transition须写在初始态而非hover态。
图片容器必须设为 relative 才能定位 ::after 遮罩
直接在 <img> 上加 ::after 是无效的——<img> 是替换元素，不支持伪元素。必须用一个包裹容器（如 <div> 或 <figure>），并设 position: relative，否则 ::after 会脱离图片上下文定位。
常见错误是写成这样：
<img src="a.jpg" class="hover-mask">
.hover-mask::after { content: "文字"; position: absolute; ... }这不会显示任何遮罩。正确结构是：
<div class="img-wrapper">
<img src="a.jpg" alt="">
</div>
<p>.img-wrapper {
position: relative;
display: inline-block; /<em> 防止宽高塌陷 </em>/
}
.img-wrapper::after {
content: "介绍文案";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
color: white;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}opacity 切换必须配合 pointer-events 控制点击穿透
只靠 opacity: 0 → 1 切换，会导致遮罩层始终占据鼠标事件区域：即使透明，也会挡住下方图片的 :hover 或点击行为（比如你希望图片可被点击跳转）。
立即学习“前端免费学习笔记（深入）”；
解决方法是在隐藏状态关闭交互：
.img-wrapper::after { opacity: 0; pointer-events: none; }.img-wrapper:hover::after { opacity: 1; pointer-events: auto; }
漏掉 pointer-events 是最常被忽略的一环，尤其在移动端或带链接的图卡中，会导致点击失效或 hover 响应迟滞。
文字居中要避免 flex 在旧浏览器失效
如果项目需兼容 IE11 或早期 Safari，display: flex 在 ::after 中可能不生效（IE11 对伪元素 + flex 支持不稳定）。稳妥做法是回退到绝对定位 + transform：
.img-wrapper::after {
...
display: flex; /* 现代浏览器默认 */
align-items: center;
justify-content: center;
}
<p>/<em> 兼容写法（叠加） </em>/
.img-wrapper::after {
display: block;
line-height: 1;
text-align: center;
}
.img-wrapper::after::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.img-wrapper::after > * {
display: inline-block;
vertical-align: middle;
}但更轻量的做法是直接用 transform：
.img-wrapper::after {
...
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}注意：此时需确保 ::after 内容是单行或固定高度，否则垂直居中可能偏移。
transition 要写在初始态，而非 hover 态
很多人把 transition 写在 :hover::after 里，结果只有悬停进入有动画，离开时立刻消失——因为离开时样式恢复到无 transition 的初始态。
正确写法是：
.img-wrapper::after { opacity: 0; transition: opacity 0.3s ease; }.img-wrapper:hover::after { opacity: 1; }
所有过渡效果都必须定义在「非 hover 的基础态」，否则退出动画必然丢失。同理，如果还改了 background-color 或 transform，也要一并在初始态声明 transition。
遮罩的视觉合理性往往取决于退出动画是否自然——这点比进入动画更重要，但容易被忽略。
