CSS如何实现鼠标悬停时一张图片覆盖另一张图片的效果

实现核心逻辑 #

通过z-index属性控制定位元素的堆叠层级，鼠标悬停时提升当前图片的层级值，使其覆盖其余重叠元素。

基础HTML结构 #

<!-- 父容器用来约束图片位置 -->
<div class="image-wrapper">
  <img src="图片1地址" alt="图1" class="overlap-img">
  <img src="图片2地址" alt="图2" class="overlap-img">
</div>

完整CSS代码 #

/* 父容器基础样式 */
.image-wrapper {
  position: relative; /* 开启相对定位作为内部元素定位基准 */
  width: 400px; /* 可自定义，和图片宽度匹配即可 */
  height: 300px; /* 可自定义，和图片高度匹配即可 */
  overflow: hidden;
}

/* 重叠图片通用样式 */
.overlap-img {
  position: absolute; /* 开启绝对定位实现重叠 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* 初始统一层级 */
  transition: z-index 0.1s; /* 可选，加过渡避免层级切换太生硬 */
}

/* 悬停时提升当前图片层级 */
.overlap-img:hover {
  z-index: 9; /* 只要大于初始层级值即可生效 */
}

注意事项 #

• z-index仅对position属性值不为static的元素生效，必须给图片设置非static的定位属性才能控制层级
• 如果页面内有其他堆叠上下文，需要调整悬停时的z-index值保证足够大，不会被父级外的元素遮挡
• 两张以上的重叠图片也可以用同样的逻辑实现，不需要额外修改规则

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