Items in grid don't resize in response to animation

Issue

I have a grid of four squares and I want the other squares to shrink responsively when one expands on hover. They do respond, but only after the transition is complete for the expanding square. Why do they wait until the animation is complete to resize? Is it possible to do this so they respond 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>
    

Solution

I just did something similar (and I will have an article about it soon)

.gallery {
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1;     /* control the scale factor */
  
  display: grid;
  gap: var(--g);
  width: calc(2*var(--s) + var(--g));
  aspect-ratio: 1;
  grid-template-columns: repeat(2,auto);
}

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: .35s linear;
}

.gallery img:hover{
  width:  calc(var(--s)*var(--f));
  height: calc(var(--s)*var(--f));
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #60c4ff;
}
<div class="gallery">
  <img src="https://picsum.photos/id/1028/300/300" alt="a forest after an apocalypse">
  <img src="https://picsum.photos/id/15/300/300" alt="a waterfall and many rocks">
  <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain">
  <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers">
</div>

It works with divs as well:

.gallery {
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1;     /* control the scale factor */
  
  display: grid;
  gap: var(--g);
  width: calc(2*var(--s) + var(--g));
  aspect-ratio: 1;
  grid-template-columns: repeat(2,auto);
}

.gallery > div {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  cursor: pointer;
  background: purple;
  transition: .35s linear;
}

.gallery div:hover{
  width:  calc(var(--s)*var(--f));
  height: calc(var(--s)*var(--f));
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #60c4ff;
}
<div class="gallery">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published