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>
    

推荐答案

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>

Html相关问答推荐

通过pandoc整页宽度markdown 到html

垂直标题表 角material

由于边框折叠属性,HTML 表格有一条奇怪的粗体水平线

如何随着material 徽章的索引增加而更改 colored颜色 ,例如(0,1,2,3,..etc)在Angular

如何使用 CSS 修复球动画

内容在放大时不适合屏幕,缩小时会留下空白

如何使用 JavaScript 获取 HTML 中的 lang 属性?

将您的 favicon.ico 文件放在非根路径中是一个坏主意吗?

iOS JavaScript 桥接器

<导航> 或 <菜单> (HTML5)

如何在html表格上显示滚动条

在页面加载时将焦点设置在 HTML 输入框上

如何从 Bootstrap 3 中获取响应式网格?

如何将样式应用于嵌入式 SVG?

如何自定义有序列表中的数字?

如何使用 bootstrap 程序将链接放在按钮上?

未捕获的错误:SECURITY_ERR:当我try 设置 cookie 时出现 DOM 异常 18

带有货币符号的 HTML 文本输入字段

javascript如何上传blob?

如何指定 CSS 类的顺序?