<div class="curtain">
  <div class="wrap">
    <div class="curtain-left"></div>
    <div class="curtain-right"></div>
  </div>
</div>
html,
body {
  padding: 0;
  margin: 0;
}
body {
  height: 100vh;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.curtain {
  width: 500px;
  height: 300px;
  border: 10px solid #000;
  overflow: hidden;
  position: relative;
  margin: 1rem auto;
}

.curtain-left,
.curtain-right {
  position: absolute;
  top: 0;
  width: calc(50% + 1px);
  height: 100%;
  overflow: hidden;
  transition: transform 5s ease;
}
.curtain-left {
  left: 0;
  transform: translateX(-100%);
}
.curtain-right {
  right: 0;
  transform: translateX(100%);
}
.reverse .curtain-left,
.reverse .curtain-right {
  transform: translateX(0%);
}

.curtain-left:before,
.curtain-right:before {
  content: "";
  display: block;
  width: 200%;
  height: 100%;
  background: url(https://picsum.photos/id/18/500/300) no-repeat;
  background-size: cover;
}
.curtain-right:before {
  position: absolute;
  left: -100%;
  top: 0;
}

/* this will break it
.wrap {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.reverse .wrap {
  display: block;
}
 */

/* use this instead */

.curtain:not(.show) .wrap {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  max-width: none;
  min-width: 0;
}
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
const curtain = document.querySelector(".curtain");

curtain.addEventListener("click", reverseAnimation);
function reverseAnimation() {
  curtain.classList.toggle("reverse");
  curtain.classList.add("show");
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.