I have this simple grid here:
<html>
<head>
<style>
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(13, 3fr);
}
.box {
position: relative;
padding-bottom: 100%;
color: #fff;
transition: 1000ms;
}
.box .square {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid;
box-sizing: border-box;
background: #101318;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
}
.box:hover {
transform: scale(2);
z-index: 2;
}
.r1 { grid-row: 20; }
.r2 { grid-row: 21; }
.c1 { grid-column: 2; }
.c2 { grid-column: 3; }
</style>
</head>
<body>
<div class="grid">
<div class="box r1 c1">
<div class="square">A</div>
</div>
<div class="box r2 c1">
<div class="square">B</div>
</div>
<div class="box r1 c2">
<div class="square">C</div>
</div>
<div class="box r2 c2">
<div class="square">D</div>
</div>
</div>
</body>
</htmlWhen I hover over a box, it gets bigger and comes into the foreground, but as soon as I leave it gets smaller, as it should, but it also goes back into the back, but I want it to stay in the foreground, until it is small again, and only be overlapped by the currently hovered box. Thanks