通过设置相对定位容器和绝对定位的::after伪元素，创建默认透明的覆盖层，利用:hover触发其opacity变化实现遮罩显现。1. 容器设position: relative；2. ::after创建背景遮罩，默认opacity: 0；3. :hover时opacity变为1；4. 可配合img的opacity过渡增强视觉效果。关键在于定位与transition配合。

要实现图片在悬停时透明度发生变化，并结合 ::after 伪元素和 :hover，可以用于创建如“鼠标移上显示文字遮罩”等视觉效果。以下是具体实现方法。

基本原理

通过设置图片容器的相对定位，使用 ::after 在图片上方添加一个覆盖层，默认隐藏或半透明，当鼠标悬停时通过 :hover 改变该覆盖层的 opacity（透明度），从而实现渐变或显现效果。

HTML 结构

<div class="img-container">
  <img src="example.jpg" alt="示例图片">
</div>

CSS 样式实现

关键点是给容器设置 position: relative，然后为 ::after 设置绝对定位，覆盖在图片之上。

立即学习“前端免费学习笔记（深入）”；

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

.img-container {
  position: relative;
  display: inline-block;
}
<p>.img-container img {
display: block;
transition: opacity 0.3s ease;
}</p><p>/<em> 创建覆盖层 </em>/
.img-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /<em> 半透明黑色遮罩 </em>/
opacity: 0; /<em> 默认完全透明，不可见 </em>/
transition: opacity 0.3s ease;
}</p><p>/<em> 悬停时显示遮罩 </em>/
.img-container:hover::after {
opacity: 1; /<em> 完全不透明，遮罩显现 </em>/
}</p>

扩展：悬停时图片本身也变化透明度

如果你想让图片本身也变透明，可以同时控制 img 的 opacity：

立即学习“前端免费学习笔记（深入）”；

.img-container img {
  transition: opacity 0.3s ease;
  opacity: 1;
}
<p>.img-container:hover img {
opacity: 0.8; /<em> 图片稍微变透明 </em>/
}</p>

这样，悬停时图片略微变淡，同时上面的遮罩显现，增强交互感。

基本上就这些，利用 :hover 触发 ::after 的 opacity 变化，就能轻松实现优雅的悬停透明效果。关键是定位和过渡动画的配合。