缩放时重叠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;
}