如何使用CSS实现图片重叠效果且鼠标hover时对应图片置顶？

架构老林

2026-9-26

实现方案

核心通过z-index属性配合:hover伪类实现，不需要额外JavaScript逻辑，实现步骤如下：

1. 基础布局前提

你已经完成的重叠布局需要满足两个基础要求：

所有重叠图片的父容器设置position: relative
每个图片设置position: absolute，通过偏移属性实现重叠效果

2. 核心控制逻辑

给每张图片预设不同的初始z-index值定义默认层级顺序，悬停时给当前图片设置一个远高于所有初始值的z-index，鼠标移出后伪类样式失效，自动恢复初始层级。

3. 完整代码示例

HTML结构

<div class="image-stack">
  <img src="你的图片地址1" alt="图片1" class="stack-img">
  <img src="你的图片地址2" alt="图片2" class="stack-img">
  <img src="你的图片地址3" alt="图片3" class="stack-img">
  <img src="你的图片地址4" alt="图片4" class="stack-img">
  <img src="你的图片地址5" alt="图片5" class="stack-img">
</div>

CSS代码

/* 重叠组父容器 */
.image-stack {
  position: relative;
  width: 500px; /* 按需调整为你的实际尺寸 */
  height: 350px;
  margin: 20px;
}

/* 重叠图片通用样式 */
.stack-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s ease; /* 可选：加过渡动画更顺滑 */
}

/* 预设初始层级，按你需要的默认顺序调整数值 */
.stack-img:nth-child(1) { z-index: 1; }
.stack-img:nth-child(2) { z-index: 2; }
.stack-img:nth-child(3) { z-index: 3; }
.stack-img:nth-child(4) { z-index: 4; }
.stack-img:nth-child(5) { z-index: 5; }

/* 悬停时抬高层级，数值只要大于所有初始z-index即可 */
.stack-img:hover {
  z-index: 999;
  /* 可选附加效果：悬停放大加阴影，提升交互感 */
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}