Диагональное разделение 2 изображений с переходом

Question

Мне было интересно, можно ли разделить экран на 2 части по диагонали, как показано на рисунке. Когда я наводил курсор на рисунок А, диагональная линия немного смещалась вправо, раскрывая большую часть изображения А, скрывая немного изображения В (я думаю, что переход?), И когда я наводил курсор на изображение В произойдет обратное.

Заранее спасибо, Мартин

Answer 1

Эффект перехода по диагонали изображения является уникальным запросом. Я старался изо всех сил, не могли бы вы проверить эффект выявления.

section {
  border: 1px solid black;
  display: flex;
  width: 400px;
  box-sizing: border-box;
}
.diagonalHover {
  position: absolute;
  width: 66%;
  height: 200px;
  transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
  background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.diagonalHover.second {
  background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
  width: 75%;
  z-index: 1;
}
.diagonalHover.second:hover {
  width: 75%;
  z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}

.diagonalHover.second {
  right: 0;
  top: 0;
  -webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}

<section>
  <div class="diagonalHover first">
    
  </div>
  <div class="diagonalHover second">
    
  </div>
</section>