My current challenge involves a grid showcasing four squares that should shrink responsively when one expands on hover. Although the other squares do respond, their resizing occurs only after the transition is complete for the expanding square. I am curious as to why they wait until the animation finishes before adjusting in size. Is there a way to make them react in real-time to the expanding square?
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 200px;
height: 200px;
gap: 10px;
transition: all 1s linear;
}
.square {
background-color: rebeccapurple;
width: 100%;
height: 100%;
transition: all 1s linear;
}
.square:hover {
width: 150px;
height: 150px;
transition: all 1s linear;
}
body {
display: flex;
justify-content: center;
} <body>
<main>
<div class="square" id="one"></div>
<div class="square" id="two"></div>
<div class="square" id="three"></div>
<div class="square" id="four"></div>
</main>
</body>