<section class="block">
  <div class="block__inner">
    <div class="block__item">
      <div class="block__item-inner">
        <div class="block__first">
          <div class="block__content">
            <div class="block__text">1-first</div>
          </div>
        </div>
        <div class="block__second">
          <div class="block__content">
            <div class="block__text">1-second</div>
          </div>
        </div>
      </div>
    </div>
    <div class="block__item">
      <div class="block__item-inner">
        <div class="block__first">
          <div class="block__content">
            <div class="block__text">2-first</div>
          </div>
        </div>
        <div class="block__second">
          <div class="block__content">
            <div class="block__text">2-second</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

* {
  box-sizing: border-box;
}

.block {
  overflow: hidden;
  font: 1.5rem / 1 sans-serif;
  color: deepskyblue;
}

.block__inner {
  display: flex;
  margin: 0 -50.1923px; /* Math.tan(15*Math.PI/180) * 300 / 2 - 10 */
  height: 300px;
}

.block__item {
  position: relative;
  width: 50%;
  transform: skewX(-15deg);
  overflow: hidden;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
}

.block__item:hover .block__item-inner {
  transform: translateX(-50%);
}

.block__item:hover .block__first .block__text {
  transform: translateX(calc(50% + 40.1923px));
}

.block__item-inner {
  display: flex;
  height: 100%;
  transition: transform 0.5s;
}

.block__first, .block__second {
  flex: 1 0 100%;
  height: 100%;
  overflow: hidden;
}

.block__second {
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
}

.block__content {
  transform: skewX(15deg);
  height: 100%;
  padding: 0 80.3847px;
  margin: 0 -40.1923px;
  background: no-repeat center / cover;
}

.block__text {
  padding: 10px;
  background-color: #0007;
  transition: transform 0.5s;
}

.block__item:nth-child(1) .block__first .block__content {
  background-image: url('https://images.unsplash.com/photo-1601758174039-617983b8cdd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=686&q=80');
}

.block__item:nth-child(1) .block__second .block__content {
  background-image: url('https://images.unsplash.com/photo-1596658210507-9d8bec95314c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=750&q=80');
}

.block__item:nth-child(2) .block__first .block__content {
  background-image: url('https://images.unsplash.com/photo-1475327326879-7f1ef432e839?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=774&q=80');
}

.block__item:nth-child(2) .block__second .block__content {
  background-image: url('https://images.unsplash.com/photo-1592893658095-2901747b763d?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');
}