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与缩放效果重叠

回答

相关问题