CSS sliding zoom effect with overlapping element - html

Question

I have a header with two divs. The two divs are next to each other. I'm using bootstrap with flex box for this. I want to create a sliding effect (and zoom) when hovering over the divs. Hovering over the left div should change the width of both the left and right div.
Tricky part I'm having is that I want to add a diagonal line with the same color as the right div to create a nice look. I've tried creating that with a pseudo after on the right div but the issue is when hovering it will not move with the rest of the div. I had to give it position: absolute to display it outside the right div.
Maybe I'm doing something wrong or maybe there is a better solution. I haven't figured this one out yet.
JSfiddle
https://jsfiddle.net/aq9Laaew/235971/
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(asset_path("bgs/bg-1.jpg"));
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
width: 80vw;
}
.header-content {
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 20%;
height: 100%;
left: 50%;
border-style: dashed;
border-width: 1em;
border-color: #000000;
}
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-5">
<div class="text-center header-text">
<h2>Text</h2>
</div>
</div>
</div>
</div>
</div>

Answer 1

After some investigation I've fixed the sliding effect of the overlay. I've appended the div.overlay inside the header-content and set postion:relative on .header-content class.
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: 75% 50%;
background-color: #EFEFEF;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
width: 100vw;
}
.header-content {
position: relative;
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.content-text {
position: absolute;
left: -2%;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 70%;
height: 200%;
left: -35%;
top: -60%;
background-color: #FFFFFF;
transform: rotate(10deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-2">
<div class="text-center content-text">
<h3>text</h3>
</div>
</div>
</div>
</div>
</div>