Making a div expand to all the screen overlaying other divs - html

Question

I have a 2 by 2 grid of divs displaying each time I enter the page that fills the entire browser screen.
I want to make it in a way that if I hover over each of the divs that one will fullscreen expand over the other three, hiding them while those stay still.
What I have right now doesn't quite work because when I hover over one of the divs it moves all the other ones and ruins the screen. I would really appreciate any advice.
HTML (it's just this inside the body):
<div class="box" id="sup-izq"></div>
<div class="box" id="sup-der"></div>
<div class="box" id="inf-izq"></div>
<div class="box" id="inf-der"></div>
CSS:
.box {
box-sizing: border-box;
float: left;
width: 50%;
height: 50%;
z-index: 1;
-webkit-transition: width 1s, height 1s;
transition: width 1s, height 1s;
}
.box:hover {
width: 100%;
height: 100%;
}
#sup-izq {
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: #8cff66;
}
#sup-der {
border-left: 1px solid black;
border-bottom: 1px solid black;
background-color: #ff751a;
}
#inf-izq {
border-top: 1px solid black;
border-right: 1px solid black;
background-color: #3385ff;
}
#inf-der {
border-top: 1px solid black;
border-left: 1px solid black;
background-color: #d147a3;
}

Answer 1

The best and most performant way to do that is to use transform: scale and transform-origin
The scale(2) will double its size in both directions (width/height) and the transform-origin, which defaults to center center (50% 50%), controls the origin.
Note, for an element to have a height set in precent, its parent need a height, hence I added the html, body rule. Another option would be to use viewport units vw/vh
html, body { /* added rule */
margin: 0;
height: 100%;
}
.box {
position: relative;
box-sizing: border-box;
float: left;
width: 50%;
height: 50%;
z-index: 0;
transition: transform 0.5s, /* changed property */
z-index 0.5s;
}
.box:hover {
transform: scale(2); /* added property */
z-index: 10; /* added so hovered is on top */
}
#sup-izq {
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: #8cff66;
transform-origin: left top; /* added property */
}
#sup-der {
border-left: 1px solid black;
border-bottom: 1px solid black;
background-color: #ff751a;
transform-origin: right top; /* added property */
}
#inf-izq {
border-top: 1px solid black;
border-right: 1px solid black;
background-color: #3385ff;
transform-origin: left bottom; /* added property */
}
#inf-der {
border-top: 1px solid black;
border-left: 1px solid black;
background-color: #d147a3;
transform-origin: right bottom; /* added property */
}
<div class="box" id="sup-izq"></div>
<div class="box" id="sup-der"></div>
<div class="box" id="inf-izq"></div>
<div class="box" id="inf-der"></div>

Answer 2

This is rough and ready, but works. The approach was to wrap everything in a relatively positioned wrapper, then position the squares absolutely. That way they can have a z-index, which was the crux of the matter.
.wrap {
position: relative;
height: 500px;
}
.box {
display: block;
width: 50%;
height: 50%;
z-index: 1;
-webkit-transition: width 1s, height 1s;
transition: width 1s, height 1s;
position: absolute;
}
.box:hover {
width: 100%;
height: 100%;
z-index: 2;
}
#sup-izq {
top: 0px;
left: 0px;
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: #8cff66;
}
#sup-der {
top: 0px;
right: 0px;
border-left: 1px solid black;
border-bottom: 1px solid black;
background-color: #ff751a;
}
#inf-izq {
bottom: 0px;
left: 0px;
border-top: 1px solid black;
border-right: 1px solid black;
background-color: #3385ff;
}
#inf-der {
bottom: 0px;
right: 0px;
border-top: 1px solid black;
border-left: 1px solid black;
background-color: #d147a3;
}
<div class="wrap">
<div class="box" id="sup-izq"></div>
<div class="box" id="sup-der"></div>
<div class="box" id="inf-izq"></div>
<div class="box" id="inf-der"></div>
</div>