2 DIVS are overlapping with zoom effect

Question

I'm trying to build a practice website with Bootstrap 4 (this is my first time using it). I've come up with a problem in the layout that I'm designing and its probably something really simple but I cant work it out.

<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 (ignore the images, they're all just placeholder)

View the full demo and you'll notice that I have 2 boxes which I have placed a zoom hover effect on. The left box is working exactly how it should be, however the right one is overlapping the left. I know this is something simple but I just cant wrap my head around it.

Any advice? Cheers

Answer 1

You're looking for modifying the background-size.

.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

Move the divs with the backgrounds into your bootstrap col elements, set overflow: hidden; on the bootstrap cols, then set the box elements to position: absolute; top: 0; left: 0; right: 0; bottom: 0; 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> 

Answer 3

Put the Div of each image in another div of their own, and set overflow to none. make sure the z-index of the outer div is higher.