<div class="sliding-doors"></div>
body{
  background: url('https://res.cloudinary.com/tihos/image/upload/v1587424333/codepen/multi-colored-concrete-wall-3697356.jpg');
  background-size: cover;
  overflow: hidden;
}

.sliding-doors{
  width: 30vw;
  height: 70hv;
  position: absolute;
  bottom: -3px;
  left: 50%;
  margin-left: -15vw;
  overflow: hidden;
  background: url('https://res.cloudinary.com/tihos/image/upload/q_auto/v1587425872/codepen/adventure-alps-background-beautiful-547114.jpg');
  background-size: cover;
  background-position: -200px 0;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.sliding-doors:before,
.sliding-doors:after{
  content: "";
  width: 50%;
  height: 500px;
  left: 0;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  -webkit-transition: 2000ms;
  border: 3px solid rgba(0, 0, 0, 0.5);
}

.sliding-doors:before {
  background: url('https://res.cloudinary.com/tihos/image/upload/v1587425040/codepen/orange-and-gray-abstract-art-3031749.jpg');
  background-size: cover;
}
  
.sliding-doors:after {
    background: url('https://res.cloudinary.com/tihos/image/upload/v1587425040/codepen/orange-and-gray-abstract-art-3031749.jpg');
  background-size: cover;

  background-position: -15vw 0;
}

.sliding-doors:hover:before{
  left: -15vw;
}

.sliding-doors:hover:after{
  left: 15vw;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.