如何在图片上叠加悬停CSS 定位与层叠实战操作步骤

本文详解如何使用 position: relative 和 position: absolute 实现文字精准覆盖在图片上方，并支持悬停显示，适配响应式网格布局，无需修改 HTML 结构即可快速生效。

本文详解如何使用 position: relative 和 position: absolute 实现文字精准覆盖在图片上方，并支持悬停显示，适配响应式网格布局，无需修改 HTML 结构即可快速生效。

要在图片上实现“悬停显示标题”的效果（如项目缩略图上浮出“zine”“Webdevelopment”等标签），核心在于建立正确的层叠上下文（stacking context）与定位关系。你当前的 HTML 中，.zine、.web 等 <div> 元素虽位于 <figure> 内，但默认为文档流中块级元素，无法自然覆盖图片——这是因为图片和文字处于同一层级，且未设置定位约束。

正确解法分三步：

1. 为容器设置相对定位（position: relative）

<figure> 是文字的直接父容器，必须设为 position: relative，才能让其内部的绝对定位元素（即标题 <div>）以它为参考系进行定位：

section.figure {position: relative; /* 关键：创建定位上下文 */}

⚠️ 注意：原 CSS 中已存在 section figure { margin-bottom: 1rem; }，我们在此基础上追加 position: relative 即可，无需额外包裹或重构 DOM。

2. 为标题元素设置绝对定位并居中控制

将 .zine、.web 等类统一用通用选择器 section figure div 处理，确保所有项目标题样式一致：

section 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.4rem;text-shadow: 0 1px 3px rgba(0,0,0,0.6);opacity: 0;transition: opacity 0.3s ease;pointer-events: none; /* 防止遮挡下方链接点击 */}

1. top/left/right/bottom: 0 + flex 实现全区域垂直水平居中；
2. opacity: 0 配合 transition 实现淡入效果；
3. pointer-events: none 确保鼠标仍能穿透文字触发 <a> 链接跳转。

3. 悬停时显示标题（关键交互逻辑）

仅需一行 CSS 即可激活悬停态：

section figure:hover div {opacity: 1;}

此时，当用户将鼠标移至 <figure> 区域（含图片及空白 padding），标题平滑浮现，完美贴合图片尺寸。

✅ 完整推荐 CSS 片段（可直接插入 style.css 底部）

/* 图片容器启用定位上下文 */section figure {position: relative;overflow: hidden; /* 防止标题溢出圆角 */}/* 标题通用样式 */section 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.4rem;text-shadow: 0 1px 3px rgba(0,0,0,0.7);opacity: 0;transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);pointer-events: none;}/* 悬停显示 */section figure:hover div {opacity: 1;}/* 可选：增强视觉反馈（如背景半透明遮罩） */section figure::before {content: '';position: absolute;top: 0; left: 0; right: 0; bottom: 0;background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));opacity: 0;transition: opacity 0.35s;pointer-events: none;}section figure:hover::before {opacity: 1;}

? 注意事项

1. 避免固定宽高：不要给 <figure> 设置 width: 200px（如原建议代码），这会破坏响应式网格（.projects 使用 grid-template-columns: 1fr 1fr），导致布局错乱；
2. 字体单位统一：推荐使用 rem 或 em 而非 px，保持与根字体缩放一致；
3. 无障碍友好：为 <div> 添加 aria-hidden="true"（若纯装饰性），或改用 <figcaption> 并配合 visually-hidden 类提升可访问性；
4. 移动端兼容：hover 在触摸设备上不触发，可补充 focus-within 或 JS fallback（如需支持 tap 交互）。

通过以上结构化定位与 CSS 层叠控制，你无需改动 HTML 结构，即可让每个项目图片精准承载悬浮标题——简洁、高效、完全适配现有模板。