使用HTML/CSS实现3x3网格画廊单图鼠标悬停显示文字效果

核心问题排查 #

• HTML结构错误：<img> 是自闭合标签，不能嵌套子元素，你当前把说明文字容器写在 <img> 标签内部属于无效写法，且单张图片和对应说明文字没有单独的父容器包裹，导致定位范围错误。
• 定位基准错误：说明文字的绝对定位基准是外层的 .favorite-item 列容器，所以说明文字默认覆盖整个列区域，自然会出现整列触发悬停的问题。
• 选择器逻辑错误：你把 :hover 伪类写在了默认透明度为0的 .text-1 上，元素完全透明时无法触发鼠标悬停事件，且你只写了 .text-1 的样式，.text-2、.text-3 没有对应样式，剩余6张图的说明文字不会生效。
• 网格结构冗余：不需要额外嵌套 .grid1/.grid2/.grid3 容器，直接用外层 .favorite 做3x3网格即可，大幅简化结构。

修改后完整代码 #

HTML

<section>
  <div class="favorite" id="favorite">
    <div class="gallery-card">
      <img src="fav01.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Activity</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav02.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Snowboarding</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav03.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Art Museum</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav04.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Halloween party</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav05.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Wine</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav06.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Travel</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav07.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Picnic</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav08.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Music</div>
      </div>
    </div>
    <div class="gallery-card">
      <img src="fav09.jpeg" alt="favorite img">
      <div class="imgtext">
        <div class="text">Wakeboarding</div>
      </div>
    </div>
  </div>
</section>

CSS

.favorite {
  width: 70%;
  margin: auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}
.gallery-card {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gallery-card:hover .text {
  opacity: 1;
}

@media (min-width: 640px) {
  .favorite {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

如果你需要保留原本三列嵌套的结构，只需要给每组img和对应说明文字套上.gallery-card容器，加上上述对应的定位和悬停样式即可，无需修改外层网格逻辑。

内容的提问来源于stack exchange，提问作者Hailey Park