Looking at this basic grid layout:
<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>
</htmlWhenever I hover over a box in the grid, it enlarges and moves to the forefront. However, upon leaving the box, it shrinks back to its original size and goes back behind other boxes. Is there a way to keep the hovered box always on top until it returns to its normal size, only being overlapped by another currently hovered box? Thanks for any help!