每当我将其悬停在HTML中时，我希望我的代码块与另一个代码块重叠

Question

我将两个div并排放置，并且希望在悬停div时增加div的大小。但是我面临的问题是，每当我将div悬停在div上时，它就会移到底部。 这是我的HTML和CSS代码。

.col-1,.col-2{
width: 49%;
height: 300px;
border: 2px solid red;
float:left;
}
.container:hover{
width: 50%;
height: 320px;
}

<div class="container">
  <div class="col-1"></div>
  <div class="col-2"></div>
</div>

每当我将块悬停在块上时，我都希望它与另一个块重叠。

Answer 1

简单的解决方案是您可以结合使用css缩放效果和过渡效果

.col-1,.col-2{
width: 49%;
height: 300px;
border: 2px solid red;
float:left;
transition:0.3s ease-in;
}

.col-1:hover, .col-2:hover{
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
}

<div class="container">
  <div class="col-1"></div>
  <div class="col-2"></div>
</div>