How do I stop the overlap of elements in an on hover transition?

Question

In my website I want to be able to allow the user to hover over an image and have the image zoomed in by a transition. I've been able to succeed with the implementation of the transition, however, when the image is being zoomed in, it constantly overlaps the other elements. My current layout is ordered in a grid and the container has been given the attribute overflow:hidden.

I tried to assign each element a z-index value of -1 when its being hovered, but the there is a continuous change between the layers which looks horrible. How do I allow each image to be zoomed in without overlapping into any of the other elements?

Here's my jsfiddle: https://jsfiddle.net/Syed213shah/4u0vh5Lb/

body {
  background-color: #800020;
}

body, html {
  height: 100%;
  margin: 0;
}



  #box-container {
    display: flex;
    height: 600px;
    width: 75%;

  }

.container {
  min-height: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 2fr;
  grid-template-rows: 50% 2fr;
  overflow: hidden;
  position: static;

}

.item1 { 
  background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
  width: 100%;
  height: 200%;
  transition: all 0.5s ease-in-out; 
  position: relative;

}

.item1:hover {
   transform: scale(1.1); 
   z-index: -1;

}


.item2 { 
  background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 400px;
  transition: all 0.5s ease-in-out; 
  position: relative;


}

.item2:hover {
   transform: scale(1.1); 
   z-index: -1;
}

.item3 {
  background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 400px;
  transition: all 0.5s ease-in-out; 
  position: relative;


}

.item3:hover {
   transform: scale(1.1);
   z-index: -1;

}

Answer 1

I think it is more simple to use a pseudo-element or a inner tag (as you want) and scale this element setting its parent (our <a> ) with overflow:hidden; to prevent your bug.

In my example I used a pseudoelement. I added these line of code to your CSS (I also commented some lines):

.container a {
  overflow: hidden;
}

.container a::after {
  height:100%;
  width:100%;
  content: "";
  position: absolute;
  transition: all 0.5s ease-in-out; 
  z-index:-1;
}

.item1::after{
  background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
}

.item2::after{
  background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}

.item3::after{
  background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}

.container a:hover::after{
  transform: scale(1.1);
}

I didn't touch your HTML.

 body { background-color: #800020; } body, html { height: 100%; margin: 0; } #box-container { display: flex; height: 600px; width: 75%; } /* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg */ /* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 */ /* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */.container { min-height: 500px; width: 100%; display: grid; grid-template-columns: 50% 2fr; grid-template-rows: 50% 2fr; overflow: hidden; position: static; }.item1 { /*background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');*/ width: 100%; height: 200%; /*transition: all 0.5s ease-in-out;*/ position: relative; } /*.item1:hover { transform: scale(1.1); z-index: -1; }*/.item2 { /*background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');*/ grid-column: 2; grid-row: 2; width: 100%; height: 400px; /*transition: all 0.5s ease-in-out; */ position: relative; } /*.item2:hover { transform: scale(1.1); z-index: -1; }*/.item3 { /*background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');*/ grid-column: 2; grid-row: 1; width: 100%; height: 400px; /*transition: all 0.5s ease-in-out; */ position: relative; } /* -------------------------- */ /* I added these lines of code */ /* -------------------------- */.container a { overflow: hidden; }.container a::after { height:100%; width:100%; content: ""; position: absolute; transition: all 0.5s ease-in-out; z-index:-1; }.item1::after{ background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg'); /*to set a background without repetition and always horizontally center you could use also this syntaxt: background: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg') 50% top no-repeat transparent; */ }.item2::after{ background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000'); }.item3::after{ background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg'); }.container a:hover::after{ transform: scale(1.1); } /* -------------------------- */ /* I added these line of code */ /* -------------------------- */.item1 h2 { font-size: 50px; position: absolute; font-family: Staatliches; text-align: center; color: white; text-decoration: none; padding: 500px 70px; }.item2 h2 { font-size: 50px; position: absolute; font-family: Staatliches; text-align: center; color: white; text-decoration: none; padding: 200px 200px; }.item3 h2 { font-size: 50px; position: absolute; font-family: Staatliches; text-align: center; color: white; text-decoration: none; padding: 185px 200px; }.full-height { height: 100%; }.bottom-height { height: 100%; } h1 { font-size: 50px; font-family: Staatliches; text-align: center; color: #002a58; } #navbar { background-color: #800020; position: fixed; top: -30px; width: 100%; transition: top 0.3s; } #navbar ul { height: -30px; padding: 10px 0 10px 40px; width: 100%; } #navbar li{ float: left; line-height: 20px; margin-right: 30px; padding: 10px 3px; position: relative; list-style-type: none; } #navbar li a { font-family: Staatliches; text-decoration: none; color: rgb(13, 11, 134); } #navbar li a:hover { background-color: #ddd; color: black; }

 <body> <div class="full-height"> <script src="script.js"></script> <div class="container"> <a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" > <h2> Europe's biggest stadium </h2> </a> <a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" > <h2>European Success</h2> </a> <a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" > <h2>Current Squad</h2> </a> </div> <div id="navbar"> <ul> <li><a href="https://first-website.awais.repl.co/">Home</a></li> <li><a href="news.asp">Squad</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> <a2><a>Created by Awais</a></a2> </ul> </div> <h1>FC Barcelona</h1> </div> <div class="bottom-height"> </div> </body>