Javascript 2个div与缩放效果重叠

我正在尝试用Bootstrap4建立一个实践网站（这是我第一次使用它）。我在设计的布局中遇到了一个问题，可能很简单，但我无法解决

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

|（忽略图像，它们都只是占位符）

查看完整的演示，您会注意到我有两个框，其中我放置了缩放悬停效果。左框的工作方式与它应该的工作方式完全相同，但是右框与左框重叠。我知道这件事很简单，但我就是想不起来

有什么建议吗？

---

干杯

您希望修改背景大小

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

---

您正在寻找修改背景大小

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

---

将带有背景的div移动到bootstrap col元素中，设置

overflow:hidden

在引导cols上，然后将框元素设置为

位置：绝对；排名：0；左：0；右：0；底部：0


#标题框1{
背景图片：url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg);
}
#头箱2{
背景图片：url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg);
}
#箱排{
高度：250px；/*您不需要修改此值*/
溢出：隐藏；
框大小：边框框；
}
.标题框{
背景位置：中心；
过渡：所有的1容易；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-webkit转型：转型1秒轻松；
-o-过渡：所有1容易；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.标题框：悬停{
转换：比例（1.5）；
-moz变换：比例（1.5）；
-webkit转换：比例（1.5）；
-o变换：比例（1.5）；
-ms变换：比例（1.5）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）”；
过滤器：progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）；
}
#框行>.col-lg-6{
溢出：隐藏；
}
将带有背景的div移动到引导col元素中，设置
溢出：隐藏
在引导cols上，然后将框元素设置为
位置：绝对；排名：0；左：0；右：0；底部：0


#标题框1{
背景图片：url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg);
}
#头箱2{
背景图片：url(http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg);
}
#箱排{
高度：250px；/*您不需要修改此值*/
溢出：隐藏；
框大小：边框框；
}
.标题框{
背景位置：中心；
过渡：所有的1容易；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-webkit转型：转型1秒轻松；
-o-过渡：所有1容易；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.标题框：悬停{
转换：比例（1.5）；
-moz变换：比例（1.5）；
-webkit转换：比例（1.5）；
-o变换：比例（1.5）；
-ms变换：比例（1.5）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）”；
过滤器：progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）；
}
#框行>.col-lg-6{
溢出：隐藏；
}

将每个图像的Div放在它们自己的另一个Div中，并将overflow设置为none。确保外部div的z索引更高。
将每个图像的div放在它们自己的另一个div中，并将overflow设置为none。确保外部div的z索引更高。
将两个div的z索引设置为1，悬停时设置为2。@OfficialAntarctica它不起作用：（从中复制代码，测试它，它可以工作。尝试将标记更改为
，并将
高度：100%；
添加到
。标题框
和
溢出：隐藏；
添加到
#框行。col-lg-6
将
z-index
设置为1，悬停时将其设置为2。@OfficialAntarctica它不起作用：（从中复制代码，测试它，它可以工作。尝试将标记更改为
，并将
高度：100%；
添加到
。标题框
和
溢出：隐藏；
添加到
#框行。col-lg-6
OP说这不起作用。他们不希望元素在缩放时显示在另一个上方，并将更高的z索引悬停在w上。）我会让它出现在另一个元素上。我试着复制你的精确代码，但对我来说仍然是一样的。@jkarakizi好的，我误解了你想要的-现在就试试。OP说那不行。他们不希望元素在缩放时出现在另一个元素上，悬停时更高的z索引会使它出现在另一个元素上。我试过了复制你的精确代码，对我来说仍然是一样的。@jkarakizi好的，我误解了你想要的-现在试试。