如何实现图片hover时在视口底部居中显示固定位置的caption？

问题说明 #

需求：每张图片的标题（caption）在视口底部居中显示，滚动页面时标题固定在该位置，仅在悬停对应图片时显示。现有代码无法实现预期效果，标题始终显示在图片底部。

问题原因 #

你的代码逻辑本身接近正确，但存在两个核心问题：

1. 每个图片独立拥有一个fixed定位的标题，同时悬停多个图片时，多个标题会在视口底部重叠；
2. 父容器.image-container的overflow: hidden对fixed元素无效，且测试时图片未加载导致容器高度异常，让你误以为标题绑定在图片底部。

修正后的代码 #

HTML（移除冗余换行，结构保持不变） #

<div class="gallery">
  <div class="image-container">
    <img alt="Placeholder Image 1" src="1.jpg">
    <div class="caption">Caption for Image 1</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 2" src="2.jpg">
    <div class="caption">Caption for Image 2</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 3" src="3.jpg">
    <div class="caption">Caption for Image 3</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 4" src="4.jpg">
    <div class="caption">Caption for Image 4</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 5" src="5.jpg">
    <div class="caption">Caption for Image 5</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 6" src="6.jpg">
    <div class="caption">Caption for Image 6</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 7" src="7.jpg">
    <div class="caption">Caption for Image 7</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 8" src="8.jpg">
    <div class="caption">Caption for Image 8</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 9" src="9.jpg">
    <div class="caption">Caption for Image 9</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 10" src="10.jpg">
    <div class="caption">Caption for Image 10</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 11" src="11.jpg">
    <div class="caption">Caption for Image 11</div>
  </div>
  <div class="image-container">
    <img alt="Placeholder Image 12" src="12.jpg">
    <div class="caption">Caption for Image 12</div>
  </div>
</div>

CSS（优化定位逻辑，解决重叠问题） #

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.image-container {
  position: relative;
  /* 移除overflow: hidden，fixed元素不受其约束 */
}

.image-container img {
  width: 100%;
  height: auto;
  display: block; /* 消除图片底部默认空白间隙 */
}

.caption {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999; /* 确保标题在所有页面元素上方 */
  white-space: nowrap; /* 防止标题换行溢出 */
}

/* 悬停图片时显示对应标题 */
.image-container:hover .caption {
  opacity: 1;
}

/* 可选：添加图片悬停高亮效果，提升交互感 */
.image-container:hover img {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

关键逻辑说明 #

• position: fixed：让标题始终绑定视口，滚动页面时不会跟随图片移动；
• left: 50% + transform: translateX(-50%)：实现标题水平居中，比固定宽度的居中方式更灵活；
• z-index: 999：避免标题被页面其他内容遮挡；
• 移除overflow: hidden：该属性对脱离文档流的fixed元素无效，反而会干扰布局判断。

如果想彻底避免多标题重叠，可以用JavaScript实现“全局单标题”（仅显示当前悬停图片的标题），但上述CSS方案已能满足核心需求，适合新手快速实现效果。

内容的提问来源于stack exchange，提问作者Innes Evans