CSS图片悬停文字遮罩效果实现方法

常见错误是写成这样：

<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;
}</p>

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;
}</p>

但更轻量的做法是直接用 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。

遮罩的视觉合理性往往取决于退出动画是否自然——这点比进入动画更重要，但容易被忽略。

今天关于《CSS图片悬停文字遮罩效果实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！