Bootstrap - 我需要放大鼠標懸停的圖像，但保持其原始大小

Question

我想創建一個帶有一些填充圖像的引導程序網格，這些填充是放大懸停的。問題是，即使我設置溢出爲「隱藏」，他們仍然阻止我設置的填充線 - 填充設置在相同的元素，並由於某種原因，他們重寫它。例如，當我將鼠標懸停在左側圖像上時，它會長大一點，並阻擋中間的垂直白線。我如何強制css尊重填充？

我的HTML

<div class="row" style="height:100%"> 
 
<div class="col-md-6 img-hover" style="padding-right:3px;height:100%;overflow:hidden;"> 
 
     <img class="img-responsive" src="Images/image.jpg")" style="overflow: hidden" /> 
 
     </div> 
 
     <div class="col-md-6" style="overflow:hidden;height:100%; padding-right: 3px;"> 
 
      <div class="row"> 
 
       <img class="img-responsive" src="/Images/image2.jpg")" /> 
 
      </div> 
 
      <div class="row" style="padding-top:3px;height:100%"> 
 
       <div class="col-md-6" style="padding-left: 0px; padding-right: 3px"> 
 
        <img class="img-responsive" src="/Images/image3.jpg")" /> 
 
       </div> 
 
       <div class="col-md-6" style="padding-left: 0px; padding-right: 3px"> 
 
        <img class="img-responsive" src="/Images/image3.jpg")" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

我的CSS：

.img-hover img { 
    -webkit-transition: all .3s ease; /* Safari and Chrome */ 
    -moz-transition: all .3s ease; /* Firefox */ 
    -o-transition: all .3s ease; /* IE 9 */ 
    -ms-transition: all .3s ease; /* Opera */ 
    transition: all .3s ease; 
    overflow:hidden; 
} 

.img-hover img:hover { 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transform:translateZ(0) scale(1.20); /* Safari and Chrome */ 
    -moz-transform:scale(1.10); /* Firefox */ 
    -ms-transform:scale(1.10); /* IE 9 */ 
    -o-transform:translatZ(0) scale(1.10); /* Opera */ 
    transform:translatZ(0) scale(1.10); 
} 

這是我的形象。我應該做些什麼改變，縮放的圖像會停止屏蔽填充線？非常感謝。

Answer 1

您可以對已包含<img><div>塊使用overflow: hidden屬性。並在:hover使用transform: scale(x)屬性。

在下面的代碼片段看一看：

.grid-box { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.first-row { 
 
    display: flex; 
 
} 
 

 
.grid { 
 
    border: 1px solid #fff; 
 
    overflow: hidden; 
 
    transition: all .3s linear; 
 
} 
 

 
.one, .two { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.three { 
 
    width: 202px; 
 
    height: 100px; 
 
} 
 

 
.grid:hover img { 
 
    transform: scale(2); 
 
    transition: all .2s linear; 
 
}

<div class="grid-box"> 
 
    <div class="first-row"> 
 
    <div class="grid one"> 
 
     <img src="http://placehold.it/100x100" alt="" /> 
 
    </div> 
 
    <div class="grid two"> 
 
     <img src="http://placehold.it/100x100" alt="" /> 
 
    </div> 
 
    </div> 
 
    <div class="grid three"> 
 
    <img src="http://placehold.it/202x100" alt="" /> 
 
    </div> 
 
</div>

希望這有助於！