.curtain { margin: 0 auto; width: 100%; height: 100vh; overflow: hidden; &__wrapper { width: 100%; height: 100%; input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 100; opacity: 0; top: 0; left: 0; // When the checkbox is checked... &:checked { // Slide the first panel &~div.curtain__panel--left { transform: translateX(0); } // Slide the second panel &~div.curtain__panel--right { transform: translateX(0); } } } } input[type=checkbox]:not(:checked){ pointer-events: none; } &__panel { display: flex; align-items: center; background-image: url(https://img.freepik.com/free-vector/theater-cinema-curtains-with-focus-light-vector-illustration_1017-38346.jpg?w=1380&t=st=1688835373~exp=1688835973~hmac=9ecd7145a02cb26685ce429715ef1dda481ba066030a0fa7ce3f3353b475a620); color: #fff; float: left; position: relative; width: 50%; height: 100vh; transition: all 1s ease-out; z-index: 2; &--left { justify-content: flex-end; transform: translateX(-100%); } &--right { justify-content: flex-start; transform: translateX(100%); } } &__content { align-items: center; background: #333; color: #fff; display: flex; flex-direction: column; height: 100vh; justify-content: center; padding: 1rem 0; position: absolute; text-align: center; z-index: 1; width: 100%; img { width: 20%; } } }