当我在悬停时展开时，如何阻止其他 DIV 移动答案

【问题标题】：How can I stop my other DIVs from moving when I expand on hover当我在悬停时展开时，如何阻止其他 DIV 移动
【发布时间】：2020-01-29 18:57:02
【问题描述】：

当我的一个 DIV 在悬停时展开时，我的其他 DIV 继续移动

#entertainment
{
 width:49%;
 height: 49%;
 display: grid;
 grid-template-columns: auto auto auto; 
 grid-gap: 10%;
 border: 1px solid red;
 float: left;
}

#circle
{
 position: relative;
 overflow: auto;
  width: 80%;
 padding-top: 80%;
 border-radius: 50%;
 background: white;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 transform:translate(-5%, 0);
transition: all 0.5s ease;

align-self: center;
  justify-self: center;
}

#circle:hover
{
 width: 100%;
 padding-top: 100%;

}

    <body>
    
    <div id="entertainment">
    <div id="circle" style="background-image: url('Instagram.jpg'); transform:translate(5%, 0);" ></div>
    <div id="circle" style="background-image: url('Logo.jpg'); " ></div>
    <div id="circle" style="background-image: url('Netflix.jpg'); transform:translate(-10%, 0);" ></div>
    <div id="circle" style="background-image: url('spotify.jpg'); transform:translate(5%, 0);" ></div>
    <div id="circle" style="background-image: url('Amazon.jpg'); " ></div>
    <div id="circle" style="background-image: url('Snapchat.jpg'); transform:translate(-10%, 0);" ></div>
    
    </div>
    </body>

当我将鼠标悬停在一个 Div 上并且没有填充推动它们时，其他 Div 会继续移动。当我展开时，似乎有一个对象在推动其他 div，我对它在做什么感到非常困惑。请帮忙，因为我需要完成这个，谢谢

【问题讨论】：

当你让 div 变大时，它很好.. 更大，它会占用更多空间并将其他所有东西都推开。 this 会回答你的问题吗？

标签： html css

【解决方案1】：

不要更改 :hover 上的 width，而是使用 transform: scale(1.25) 更改大小。 scale() 函数中的值可以是任意值（1 等于 100% 或全尺寸）。

使用变换改变大小时，其他元素应保持其在布局中的位置。

【讨论】：