2 DIVSがズームエフェクトとオーバーラップしています

Question

私はBootstrap 4で練習用ウェブサイトを構築しようとしています（初めてこれを使用しています）。私は設計しているレイアウトで問題が発生している可能性がありますが、それは本当にシンプルなものですが、うまくいきません。

<div id="box-container" class="container-fluid"> 
    <div id="box-row" class="row"> 
     <div id="header-box1" class="col-lg-6 header-box"> 
     </div> 
     <div id="header-box2" class="col-lg-6 header-box"> 
     </div> 
    </div> 
</div> 

Full demo | Full code（画像は無視してください）

完全なデモを見ると、ズームホバー効果を置いたボックスが2つあることがわかります。左のボックスは、それがどのようにすべきか正確に動作していますが、右のボックスは左にオーバーラップしています。私はこれが何かシンプルだと知っていますが、私はそれの周りに私の頭を包むことができません。

アドバイスはありますか？ お気軽に

Answer 1

あなたは背景サイズを変更しますか？

.header-box { 
    background-position: center; 
    background-size:100%; 
    transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
} 
.header-box:hover{ 
    background-size:150%; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
} 

Answer 2

#header-box1 { 
 
    background-image: url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg); 
 
} 
 

 
#header-box2 { 
 
    background-image: url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg); 
 
} 
 

 
#box-row { 
 
    height: 250px; /* you don't need to modify this */ 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 

 
.header-box { 
 
    background-position: center; 
 
    transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -webkit-transition: transform 1s ease; 
 
    -o-transition: all 1s ease; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.header-box:hover { 
 
    transform: scale(1.5); 
 
    -moz-transform: scale(1.5); 
 
    -webkit-transform: scale(1.5); 
 
    -o-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; 
 
    filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); 
 
} 
 

 
#box-row > .col-lg-6 { 
 
    overflow: hidden; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div id="box-container" class="container-fluid"> 
 
    <div id="box-row" class="row"> 
 
    <div class="col-lg-6"> 
 
     <div id="header-box1" class="header-box"></div> 
 
    </div> 
 
    <div class="col-lg-6"> 
 
     <div id="header-box2" class="header-box"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

の本部入れ、その後position: absolute; top: 0; left: 0; right: 0; bottom: 0;にあるボックス要素を設定し、ブートストラップCOLSにoverflow: hidden;を設定し、ブートストラップのCOL要素に背景を持つdiv要素を移動しますそれぞれのイメージは別のdivにあり、オーバーフローをnoneに設定します。外側のdivのz-indexが高いことを確認してください。