添加灰度滤镜后，Hover放大图片出现重叠问题求助

要同时实现悬停放大、灰度切换且避免图片互相重叠，核心是给悬停状态的图片提升层级，确保它在其他图片上方显示。结合transform缩放（不影响布局）和z-index层级控制，具体修改如下：

完整CSS代码 #

/* 基础图片样式 */
img {
  /* 初始灰度状态 */
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  /* 统一过渡动画（包含灰度和缩放） */
  transition: filter 0.5s ease-in-out, transform 0.3s ease-in-out;
  /* 开启相对定位，让z-index生效 */
  position: relative;
  /* 初始缩放比例 */
  transform: scale(1);
  /* 确保放大后不被容器裁剪（保留原有需求） */
  display: block;
}

/* 悬停触发状态 */
img:hover {
  /* 取消灰度 */
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  /* 放大效果（可根据需求调整scale值） */
  transform: scale(1.2);
  /* 提升层级，让当前悬停的图片在最上层 */
  z-index: 10;
}

关键说明 #

1. 用transform: scale()实现放大：这个属性不会改变元素的实际占位，不会触发周围元素的布局移位，从根源避免因布局变化导致的重叠混乱。
2. z-index层级控制：通过给悬停的图片设置更高的z-index（需配合position: relative/absolute），确保它在其他未悬停的图片上方显示，解决互相遮挡的问题。
3. 统一过渡动画：把filter和transform的过渡写在同一个transition属性里，让灰度切换和放大动画同步，视觉更流畅。

如果你的图片是放在网格、flex等布局容器中，只需确保容器的overflow属性为visible（默认就是这个值，除非你手动设置了hidden），就能保证放大后的图片不会被容器裁剪。

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