2 DIVS與縮放效果重疊

我試圖用Bootstrap 4（這是我第一次使用它）構建練習網站。我在設計的佈局中遇到了一個問題，它可能非常簡單，但我無法解決這個問題。2 DIVS與縮放效果重疊

<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個框，我放置了一個縮放懸停效果。左邊框正在如何工作，但是右邊的框與左邊重疊。我知道這很簡單，但我無法把頭圍繞在它周圍。

有什麼建議嗎？乾杯

來源

2017-02-16 jkarakizi

將「z-index」設置爲1，並將其懸停在2上。 – Skylark

@OfficialAntarctica它沒有工作:( – jkarakizi

從http://stackoverflow.com/a/42262836/3798034複製代碼， – Skylark

您正在尋找修改背景大小。

.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 */ 
}

來源

2017-02-16 00:45:34 Skylark

OP表示不起作用，他們不希望元素在縮放時出現在另一個元素上，而懸停時更高的z-index會使其顯示在另一個元素上。 –

我嘗試過複製你的確切代碼，這對我來說仍然是一樣的。 – jkarakizi

@jkarakizi好的，我誤解了你想要的 - 現在就試試吧。 – Skylark

移動與背景的div到您的引導COL元素，在引導的cols設置overflow: hidden;，然後把盒子元素position: absolute; top: 0; left: 0; right: 0; bottom: 0;

#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>

來源

2017-02-16 00:52:52

放的股利每個圖像放在另一個div中，並設置爲無。確保外部div的z-index更高。

來源

2017-02-16 00:53:54 user2777173

2 DIVS與縮放效果重疊

回答

相關問題