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

Question

so I have this problem, I want to scale an image while hovering with mouse on it. But the image is very close to the footer. While hovering, the image is covered with the footer. Can you help me?

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-part of it

<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 (Dont mind the photo content): Before after

Answer 1

Your .body2 has overflow hidden, so it does not let the image get out of its borders,

you don't have to use z-index just remove 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>