CSS скользящий эффект масштабирования с перекрывающимся элементом

Question

У меня есть заголовок с двумя div.Два div находятся рядом друг с другом.Для этого я использую бутстрап с flex box.Я хочу создать эффект скольжения (и увеличения) при наведении курсора на div.При наведении курсора на левый div должен изменить ширину левого и правого div.

Сложность в том, что я хочу добавить диагональную линию того же цвета, что и правый элемент div, чтобы создать красивый вид.Я попытался создать это с псевдо после правого div, но проблема в том, что при наведении курсора он не будет двигаться вместе с остальным div.Мне пришлось дать ему position: absolute, чтобы отобразить его за пределами правого деления.

Возможно, я делаю что-то не так или, может быть, есть лучшее решение.Я еще не понял этого.

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

После некоторого исследования я установил скользящий эффект наложения.Я добавил div.overlay в заголовок и установил postion:relative для .header-content класса.

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