图片悬停显示文字遮罩需用相对定位容器包裹图片和绝对定位遮罩层，初始opacity为0并设transition，hover时opacity变为1；可加pointer-events: none提升交互，支持现代浏览器及IE11。
用CSS实现图片悬停显示文字遮罩，核心是把文字层默认隐藏，通过:hover触发显示，并加过渡效果让动画更自然。
基础HTML结构
图片和说明文字需要包裹在同一个容器里，确保悬停区域覆盖两者：
<div class="image-hover"> <br> @@##@@<br><div class="overlay">这是我的作品</div> <br> </div>
CSS关键样式
给容器设相对定位，文字层绝对定位覆盖图片；初始透明度为0、不可见，悬停时变为不透明：
.image-hover {<br> position: relative;<br> display: inline-block;<br>}<br><br>.image-hover img {<br> display: block;<br> width: 100%;<br>}<br><br>.overlay {<br> position: absolute;<br> top: 0;<br> left: 0;<br> width: 100%;<br> height: 100%;<br> background: rgba(0, 0, 0, 0.7);<br> color: white;<br> display: flex;<br> align-items: center;<br> justify-content: center;<br> opacity: 0;<br> transition: opacity 0.3s ease;<br>}<br><br>.image-hover:hover .overlay {<br> opacity: 1;<br>}
增强体验的小技巧
- 加
pointer-events: none到.overlay，避免遮罩干扰鼠标穿透（比如想点击图片链接） - 文字用
font-size: 1rem或em单位，适配不同尺寸图片 - 若需从下往上滑入效果，可改用
transform: translateY(100%)和translateY(0)配合transition - 多个图片统一风格？把
.image-hover类批量应用即可，无需重复写样式
兼容性与注意事项
该写法支持所有现代浏览器（Chrome/Firefox/Safari/Edge），IE11也基本可用。注意两点：
- 图片必须有明确宽高（或父容器限制尺寸），否则遮罩可能错位
- 如果图片是响应式（如
max-width: 100%），确保容器也有相应约束 - 移动端触屏设备上，hover效果可能不触发——可额外加
:focus-within或点击切换逻辑应对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
