如何在图片上实现悬停显示标题的覆盖效果-html教程-PHP中文网

如何在图片上实现悬停显示标题的覆盖效果

本文讲解如何使用 CSS 定位与层叠上下文，将文字标题精准叠加在响应式网格中的图片上方，并支持悬停显示，适配学校模板限制。核心在于为 figure 设置相对定位、为标题 div 设置绝对定位，并通过 z-index 和 transition 实现平滑交互。

本文讲解如何使用 css 定位与层叠上下文，将文字标题精准叠加在响应式网格中的图片上方，并支持悬停显示，适配学校模板限制。核心在于为 `figure` 设置相对定位、为标题 `div` 设置绝对定位，并通过 `z-index` 和 `transition` 实现平滑交互。

要在图片上实现“悬停时显示标题”的覆盖效果（overlay text on image），关键不在于把文字放在页面中间，而在于建立正确的层叠关系与定位上下文。你当前的 HTML 结构已具备基础语义（<figure></figure> 包裹 <img> 和 <div>），但缺失两个核心 CSS 原则：<ol> <li> <strong>父容器必须是定位上下文</strong>（即 <code>position: relative），否则 position: absolute 的子元素会相对于最近的已定位祖先或初始包含块（通常是）定位——这正是文字“跑出图片”的根本原因；

覆盖文字需脱离文档流、居中控制、并确保可见性（如设置颜色、背景、透明度及悬停过渡）。

以下是可直接集成到你现有 style.css 中的精简、健壮且兼容模板的解决方案：

✅ 推荐 CSS 修改（添加至你的 CSS 文件末尾或 `<style></style>` 标签内）

/* 为每个项目 figure 创建定位上下文 */
section.projects figure {
  position: relative;
  overflow: hidden; /* 防止文字溢出圆角/缩放区域 */
}

/* 统一处理所有项目中的标题 div（如 .zine, .web） */
section.projects figure div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: Plex-Bold, Arial, sans-serif;
  font-size: 1.5rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.6); /* 半透黑底提升可读性 */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

/* 悬停时显示标题 */
section.projects figure:hover div {
  opacity: 1;
}

/* 可选：增强悬停反馈（如轻微上移 + 缩放） */
section.projects figure div:hover {
  transform: translateY(-4px);
}

✅ HTML 小优化（保持语义，增强可访问性）

你现有的 HTML 已基本正确，仅建议微调：为每个标题 div 添加 role="presentation"（避免屏幕阅读器误读为内容），并统一 class 名便于维护：

<figure class="one"><a href="project_01.html">
    <img src="image/zine_thumbnail.jpg" alt="Zine project thumbnail"></a>
  <div class="project-label" role="presentation">zine</div>
</figure><figure class="two"><a href="project_02.html">
    <img src="image/webdev_thumbnail.jpg" alt="Web development project thumbnail"></a>
  <div class="project-label" role="presentation">Web Development</div>
</figure>

? 提示：将 .project-label 替换为你原有类名（如 .zine）亦可，但统一命名更利于后续维护和媒体查询适配。

⚠️ 注意事项与常见陷阱

不要删除 figure { overflow: hidden; } —— 你 CSS 中已有该声明（位于 /* main content */ 区域），它能确保图片缩放/模糊时，覆盖文字不会因 absolute 定位而“溢出”到相邻格子；
避免硬编码 top: 200px —— 如原 .zine { top: 200px; } 这种写法完全破坏响应式，会导致在不同尺寸设备上错位甚至不可见；
字体大小适配：当前设为 1.5rem，在 @media (min-width: 768px) 内你已启用大屏网格，可额外添加：
```
@media (min-width: 768px) {
  section.projects figure div {
    font-size: 1.8rem;
    padding: 0 1rem;
  }
}
```
移动端友好：若需在小屏点击触发（而非仅悬停），可补充 :focus-within（现代浏览器支持良好）：
```
section.projects figure:focus-within div,
section.projects figure:hover div {
  opacity: 1;
}
```
并确保 <a></a> 标签可聚焦（默认即可）。

✅ 最终效果验证要点

检查项	正确表现
文字是否始终居中于图片内？	✅ `display: flex + align/jc:center` 保证全尺寸居中
悬停时是否平滑淡入？	✅ `opacity + transition` 实现无闪烁过渡
图片缩放/模糊时文字是否跟随？	✅ 因 `div` 绝对定位在 `figure` 内，随父容器变换同步渲染
移动端触摸是否有效？	✅ `:focus-within` + `<a></a>` 标签天然支持 tap 聚焦