使用CSS转换属性和转换相邻的div重叠在彼此之上

Question

我为我的动画使用CSS转换属性scaleX。见CodePen。不幸的是，左侧的红色方框对悬停没有影响，并且不像其他3个那样变形。根据我的理解，由于红框上没有剩余空间，所以它无法在悬停时进行转换。我的问题有什么好的解决方案吗？

HTML

<div class="container-fluid mt-3"> 
    <div class="row"> 
    <div class="col-sm-3"> 
     <div class="img-holder"> 
     <div class="image image1"></div> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="img-holder"> 
     <div class="image image2"></div> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="img-holder"> 
     <div class="image image3"></div> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="img-holder"> 
     <div class="image image4"></div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

您也可以重新z-index上:hover并最终transform-origin第一个和最后一个元素：

.image1 { 
 
    background-color: red; 
 
} 
 

 
.image2 { 
 
    background-color: green; 
 
} 
 

 
.image3 { 
 
    background-color: blue; 
 
} 
 

 
.image4 { 
 
    background-color: pink; 
 
} 
 

 
.image { 
 
    height: 15vw; 
 
} 
 

 
.img-holder { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.img-holder .image { 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 5; 
 
    transition: all 0.5s ease; 
 
} 
 
.img-holder .image:hover { 
 
    transform: scaleX(2); 
 
    z-index: 10; 
 
} 
 

 
.col-sm-3:first-of-type :hover .image { 
 
    transform-origin: top left; 
 
} 
 

 
.col-sm-3:last-of-type :hover .image { 
 
    transform-origin: top right; 
 
} 
 

 
.col-sm-3 { 
 
    padding: 0; 
 
}

<div class="container-fluid mt-3"> 
 
    <div class="row"> 
 
    <div class="col-sm-3"> 
 
     <div class="img-holder"> 
 
     <div class="image image1"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="img-holder"> 
 
     <div class="image image2"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="img-holder"> 
 
     <div class="image image3"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="img-holder"> 
 
     <div class="image image4"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://codepen.io/gc-nomade/pen/dzvypQ