平铺图片区块中图片悬停全屏展开的技术实现问题

问题原因分析 #

你当前用float:left实现两行两列的平铺布局，当给非首图设置hover状态的width:100%时，由于浮动元素的文档流特性，后续图片的位置会被前置浮动元素占据，无法正常扩展到容器宽度，只有首图因为没有前置浮动元素，能顺利占满整行。

最优解决方案推荐 #

下面提供两种更流畅的实现方式，无需移动图片位置就能实现悬停占满区块的效果：

方案1：使用CSS Grid（推荐，布局更可控）

利用Grid的网格区域特性，让悬停的图片直接占据整个网格容器，其他图片自动隐藏，过渡效果更平滑。

.section .tiles {
  /* 设置为2x2网格 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0; /* 去掉图片间隙，保持平铺 */
  position: relative;
  aspect-ratio: 1/1; /* 保持正方形区块，可根据需求调整 */
}

.section .tiles img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

/* 悬停时让当前图片占据整个网格区域 */
.section .tiles img:hover {
  cursor: pointer;
  opacity: 1;
  grid-column: 1 / -1; /* 占满所有列 */
  grid-row: 1 / -1; /* 占满所有行 */
  z-index: 10; /* 确保覆盖其他图片 */
}

/* 非悬停图片在 hover 时隐藏，可选 */
.section .tiles:hover img:not(:hover) {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

HTML结构无需修改，保持原有4张图片的容器即可。

方案2：使用绝对定位（兼容旧浏览器）

通过给容器设置相对定位，让悬停的图片脱离文档流，直接覆盖整个容器：

.section .tiles {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* 保持正方形区块 */
}

.section .tiles img {
  width: 50%;
  height: 50%;
  float: left;
  object-fit: cover;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

.section .tiles img:hover {
  cursor: pointer;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* 可选：非悬停图片在 hover 时隐藏 */
.section .tiles:hover img:not(:hover) {
  opacity: 0;
}

关于你设想的“移至首个位置”方案的说明 #

这个方案确实可行，但会导致布局跳动（其他图片移位），用户体验不如上面两种方案。如果一定要实现，可以通过JavaScript动态调整DOM顺序，但需要额外处理过渡动画的流畅性，不推荐作为首选。

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