CSS Hover效果优化：仅让hover元素单独增高，避免整行元素变高

使用Grid布局时，hover元素显示图片会导致同行所有元素同步增高，需要实现仅hover的元素单独增高，且不遮挡下方文本。

修改CSS如下，通过Grid对齐方式和层级控制实现需求：

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* 核心：单元格顶对齐，高度自适应自身内容，不拉伸整行 */
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  text-align: center;
  position: relative;
  background: #fff; /* 覆盖下方元素，避免内容透显 */
  z-index: 1;
}

.names div:hover {
  z-index: 2; /* hover时提升层级，确保显示在上方 */
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div:hover img {
  display: block;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

HTML代码保持不变：

<div class="names">
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a class="name" href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

方案关键点 #

• align-items: start：让Grid单元格高度仅由自身内容决定，不会因为单个单元格增高而拉伸整行。
• 背景色+层级控制：避免hover元素遮挡下方内容，同时确保hover元素显示在最上层。

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