缩放时重叠Div（html，css动画）

Question

我正在尝试放大div，但它会与相邻的div重叠。

* {
	box-sizing: border-box;
}
    
.zoom {
	/* padding: 50px; */
	background-color: green;
	transition: transform .2s;
	width: 100%;
	height: 200px;
	margin: 0 auto;
}
    
.zoom:hover {
	-ms-transform: scale(1.5); /* IE 9 */
	-webkit-transform: scale(1.5); /* Safari 3-8 */
	transform: scale(1.5); 
}
    
    	
.nopadding {
	padding: 0 !important;
	margin: 0 !important;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 nopadding box1">
      <div class="zoom" id="img1"></div>
    </div>
    <div class="col-md-3 nopadding box1">
      <div class="zoom" id="img2"></div>
    </div>
    <div class="col-md-3 nopadding box1">
      <div class="zoom" id="img3"></div>
    </div>
    <div class="col-md-3 nopadding box1">
      <div class="zoom" id="img4"></div>
    </div>
  </div>
</div>

我想要实现的是悬停div应弹出而不重叠。

Answer 1

给你的css，添加：

.box1{
overflow: hidden;
height: 200px;
}

并编辑.zoom：

.zoom{
    background-color: green;
    transition: transform .2s;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}