如何实现鼠标悬停时调整两张图片的Opacity（透明度）？

我有两张图片，想要实现鼠标悬停时调整图片透明度的效果，目前我的CSS代码如下：

.project-container .img {
  flex: 4;
  position: relative;
  padding: 30px 0;
}

.project-container .img .img-2 {
  opacity: 0.5;
  z-index: 1;
}

.project-container .img .img-2:hover {
  opacity: 1;
  z-index: 2;
}

.project-container .img .img-1 {
  opacity: 1;
  z-index: 2;
}

.project-container .img img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 5%;
}

未悬停时的效果：

期望的悬停效果：

问题分析与解决方案 #

当前代码的核心问题是：img-1默认层级更高（z-index:2），完全覆盖在img-2上方，导致根本无法触发img-2的hover事件；同时两张图片没有设置重叠定位，也无法实现层叠切换的效果。

修正后的CSS代码如下：

.project-container .img {
  flex: 4;
  position: relative;
  padding: 30px 0;
}

/* 让两张图片绝对定位，在父容器内重叠 */
.project-container .img img {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 5%;
  /* 添加过渡动画，让切换更流畅 */
  transition: opacity 0.3s ease, z-index 0.3s ease;
}

.project-container .img .img-2 {
  opacity: 0.5;
  z-index: 1;
}

/* 鼠标悬停容器时，切换两张图的透明度和层级 */
.project-container .img:hover .img-1 {
  opacity: 0.5;
  z-index: 1;
}

.project-container .img:hover .img-2 {
  opacity: 1;
  z-index: 2;
}

.project-container .img .img-1 {
  opacity: 1;
  z-index: 2;
}

关键调整点 #

1. 给两张图片添加position: absolute，结合父容器的position: relative，让它们完全重叠在一起；
2. 将hover事件绑定到父容器上，只要鼠标进入图片区域就能触发状态切换，避免上层图片遮挡导致hover失效；
3. 添加transition过渡属性，让透明度和层级的变化更平滑自然。

内容的提问来源于stack exchange，提问作者Muhammad Bahruddin Saputra