<div class="curtain">
  <div class="quarter q1"></div>
  <div class="quarter q2"></div>
  <div class="quarter q3"></div>
  <div class="quarter q4"></div>
</div>

.curtain {
  width: 40vw;
  height: 20vw;
  border: 5px solid red;
  border-radius: 20px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.quarter {
  position: relative;
  overflow: hidden;
  flex: 1 0 50%;
  height: 50%;
  transition: 3s ease;
}
.quarter:after {
  content: "";
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  background: url(https://picsum.photos/id/1015/600/300);
  background-size: cover;
}
.q1:after {
  left: 0;
  top: 0;
}
.q2:after {
  top: 0;
  right: 0;
}
.q3:after {
  bottom: 0;
  left: 0;
}
.q4:after {
  right: 0;
  bottom: 0;
}
.curtain:hover .q1 {
  transform: translate(-100%, -100%);
}
.curtain:hover .q2 {
  transform: translate(100%, -100%);
}
.curtain:hover .q3 {
  transform: translate(-100%, 100%);
}
.curtain:hover .q4 {
  transform: translate(100%, 100%);
}