图片悬停显示文字遮罩需用相对定位容器包裹图片和绝对定位遮罩层，初始opacity为0并设transition，hover时opacity变为1；可加pointer-events: none提升交互，支持现代浏览器及IE11。
用CSS实现图片悬停显示文字遮罩，核心是把文字层默认隐藏，通过:hover触发显示，并加过渡效果让动画更自然。
基础HTML结构
图片和说明文字需要包裹在同一个容器里，确保悬停区域覆盖两者：
<div class="image-hover"><br> <img src="example.jpg" alt="示例图"><br> <div class="overlay">这是我的作品</div><br></div>
CSS关键样式
给容器设相对定位，文字层绝对定位覆盖图片；初始透明度为0、不可见，悬停时变为不透明：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
.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或点击切换逻辑应对
