如何调整被页脚覆盖的缩放图像的 z-index

Question

所以我遇到了这个问题，我想在将鼠标悬停在图像上时缩放图像。但图像非常接近页脚。悬停时，图像会被页脚覆盖。你能帮帮我吗？

CSS:

body {
background-color: mintcream;
transition: color, background-color .5s;
}
.Me{
  width: 50%;
  height:auto;
  border-radius: 10px;
  transition: transform .5s;
  z-index: 1;
}

.Me:hover{
  transform: scale(1.5);

}

.body2{
  font-size: 22px;
  text-align: center;
  line-height: 1.3;
  margin: 0 10% 0 10%;
  padding:10px 30px 10px 30px;
  height: max-content;
  overflow: hidden;
  transition: background-color .5s;
  background-color: #f5f5f5;
  z-index: 0;
    }
footer{
  box-sizing: border-box;
  padding: 3px;
  width: 100%;
  background-color: rgba(47, 47, 47, 0.92);
  color: white;
  z-index:-1;

}

HTML-部分

<div class="body2" id="body2">
<h1>Vitajte na mojej stránke!</h1>
  <br>
   <p>jafjskfkajsbfjkabfjkabsfjkabsfjkbasfjkbasjfkbsajkfbajksfbjkasfb
jkasbfjksabfjasbfjkbasfjkbsajfkbsajkfjfbsajfbaskjfbjskafbjkasbfjksabfjkasbfjksabfjkasbfjbasjfkbaskjfbaskjfbasjkfb</p>
<br>
  <img class= Me src="img/Me.jpg" alt="Me" height="2320" width="3088"/>
</div>


</body>

<footer>
 <p>Lorem Ipsum</p>
</footer>

Printscreen（不介意照片内容）： Before after

Answer 1

我找不到用 z-index 修复它的方法，所以我在用户悬停图像时在页脚上使用了 display:none。

body {
  background-color: mintcream;
  transition: color, background-color .5s;
}

.Me {
  width: 50%;
  height: auto;
  border-radius: 10px;
  transition: transform .5s;
  z-index: 1;
}

.Me:hover {
  transform: scale(1.5);
}
.Me:hover ~ footer {
  display:none;
}

.body2 {
  font-size: 22px;
  text-align: center;
  line-height: 1.3;
  margin: 0 10% 0 10%;
  padding: 10px 30px 10px 30px;
  height: max-content;
  overflow: hidden;
  transition: background-color .5s;
  background-color: #f5f5f5;
  z-index: 0;
}

footer {
  box-sizing: border-box;
  padding: 3px;
  width: 100%;
  background-color: rgba(47, 47, 47, 0.92);
  color: white;
  transition:all 0.5s ease;
}

<div class="body2" id="body2">
  <h1>Vitajte na mojej stránke!</h1>
  <br>
  <p>jafjskfkajsbfjkabfjkabsfjkabsfjkbasfjkbasjfkbsajkfbajksfbjkasfb jkasbfjksabfjasbfjkbasfjkbsajfkbsajkfjfbsajfbaskjfbjskafbjkasbfjksabfjkasbfjksabfjkasbfjbasjfkbaskjfbaskjfbasjkfb
  </p>
  <br>
  <img class="Me" src="img/Me.jpg" alt="Me" height="2320" width="3088" />

  <footer>
    <p>Lorem Ipsum</p>
  </footer>
</div>

Answer 2

您的 .body2 已隐藏溢出，因此不会让图像超出其边界，

您不必使用 z-index 只需删除 overflow: hidden

body {
background-color: mintcream;
transition: color, background-color .5s;
}
.Me{
  width: 50%;
  height:auto;
  border-radius: 10px;
  transition: transform .5s;
  z-index: 1;
}

.Me:hover{
  transform: scale(1.5)
}

.body2{
  font-size: 22px;
  text-align: center;
  line-height: 1.3;
  margin: 0 10% 0 10%;
  padding:10px 30px 10px 30px;
  height: max-content;
  /* overflow: hidden; remove*/
  transition: background-color .5s;
  background-color: #f5f5f5;
  z-index: 0;
    }
footer{
  box-sizing: border-box;
  padding: 3px;
  width: 100%;
  background-color: rgba(47, 47, 47, 0.92);
  color: white;
  z-index:-1;

}

<div class="body2" id="body2">
<h1>Vitajte na mojej stránke!</h1>
  <br>
   <p>jafjskfkajsbfjkabfjkabsfjkabsfjkbasfjkbasjfkbsajkfbajksfbjkasfb
jkasbfjksabfjasbfjkbasfjkbsajfkbsajkfjfbsajfbaskjfbjskafbjkasbfjksabfjkasbfjksabfjkasbfjbasjfkbaskjfbaskjfbasjkfb</p>
<br>
  <img class= Me src="https://images.pexels.com/photos/5195763/pexels-photo-5195763.jpeg?crop=entropy&cs=srgb&dl=pexels-allec-gomes-5195763.jpg&fit=crop&fm=jpg&h=8750&w=7000" alt="Me" height="2320" width="3088"/>


</div>

<footer>
 <p>Lorem Ipsum</p>
</footer>

如何调整被页脚覆盖的缩放图像的 z-index

How can I adjust z-index of a scaled image that is covered with footer

html

css

z-index