Opening vertically instead of horizontally

HTML & CSS
2

This:

.panel-left,
.panel-right {
  position: absolute;
  height: 50%;
  width: 100%;
  left:0;
  transition: all ease 8s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  top: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  bottom: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 200%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  pointer-events: none;
}

.panel-right::before {
  top: -100%;
}

.curtain.slide .panel-left {
  transform: translateY(-100%);
}

.curtain.slide .panel-right {
  transform: translateY(100%);
}

Also a prime reason why should avoid classes like panel-left/right as they are no longer on the left or right but on the top and bottom.

1 Like