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

如何在网页图片上实现悬停显示标题的层叠效果

本文讲解如何利用 css 的定位与层级控制，将文字标题精准叠加在图片上方，并支持鼠标悬停触发显示，适用于固定模板限制下的响应式项目网格布局。

本文讲解如何利用 css 的定位与层级控制，将文字标题精准叠加在图片上方，并支持鼠标悬停触发显示，适用于固定模板限制下的响应式项目网格布局。

要在图片上实现“悬停显示标题”的效果（即文字始终居中覆盖于图片顶部），核心在于建立正确的层叠上下文（stacking context） 和 精确的相对/绝对定位关系。你当前的 HTML 结构已基本合理（<figure></figure> 包裹 <img alt="如何在网页图片上实现悬停显示标题的层叠效果" > 和 <div>），但原 CSS 缺少两个关键设定： <ol> <li> <code>figure 必须设为 position: relative，作为其内部绝对定位子元素的定位参考；

标题 <div> 需使用 <code>position: absolute 并通过 top/left/right/text-align 等属性精确定位，同时确保 z-index 足够高以覆盖图片。

以下是经过验证、兼容你现有模板的完整解决方案：

✅ 正确的 CSS 修改（推荐直接替换或追加到你的 `style.css` 中）

/* 关键：为每个 figure 建立相对定位容器 */
section.projects figure {
  position: relative;
  overflow: hidden; /* 防止文字溢出时破坏布局 */
}

/* 确保图片宽度自适应容器 */
section.projects figure img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease-in-out, filter 0.3s ease-in-out;
}

/* 标题文字：绝对定位 + 居中 + 悬停显隐 */
section.projects figure div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: Plex-Bold, Arial, sans-serif;
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* 提升可读性 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 避免遮挡下方链接点击 */
  z-index: 10;
}

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

/* 可选：增强悬停反馈（如图片缩放+模糊） */
section.projects figure:hover img {
  transform: scale(1.05);
  filter: blur(2px);
}

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

建议为每个标题 <div> 添加 <code>aria-label 或改用 <figcaption></figcaption>（更语义化），例如：

<figure class="one">
  <a href="project_01.html">
    <img src="image/zine_thumbnail.jpg" alt="Zine project thumbnail">
  </a>
  <figcaption class="project-label">zine</figcaption>
</figure>

对应 CSS 中将选择器改为 section.projects figure figcaption 即可 —— <figcaption></figcaption> 天然属于 <figure></figure>，语义更清晰，且对屏幕阅读器友好。

⚠️ 注意事项 & 常见陷阱

不要遗漏 position: relative：这是绝对定位子元素（标题）的“锚点”，缺失则标题会相对于定位，导致全局偏移。
避免固定像素宽高：原答案中 width: 200px 会破坏响应式布局，应始终使用 width: 100% 或 max-width 配合 aspect-ratio（现代方案）。
z-index 不是万能解：仅当父容器有定位（relative/absolute）时才生效；此处 figure 已设 relative，div 的 z-index: 10 即可确保压在图片之上。
移动端适配：上述代码默认支持触屏设备（hover 在 iOS Safari 中由点击模拟），如需纯触摸显示，可额外添加 .touch-active 类配合 JS 切换。
字体与颜色对比度：白色文字配深色背景（如你网站的 #3f5f43）需确保足够对比度（WCAG AA 标准 ≥ 4.5:1），必要时添加 text-shadow 或半透明遮罩层。