*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background-color: #ecf0f1;
}
.wrapper{
  width: 450px;
  height: 500px;
  background-color: #fff;
  position: relative;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
  border: 12px solid #097969;
  transform-style: preserve-3d;
  transform: perspective(2500px);
}
.wrapper img{
  width: 100%;
  height: 100%;
  background-size: cover;
}
.door{
  content: '';
  position: absolute;
  background-color: #097969;
  width: 50%;
  height: 100%;
  border: 1px solid #000;
  transition: all 1s;
}
.door1{
  left: 0;
  top: 0;
  transform-origin: left;
}
.door2{
  right: 0;
  top: 0;
  transform-origin: right;
}
.wrapper:hover .door1{
  transform: rotateY(-150deg);
}
.wrapper:hover .door2{
  transform: rotateY(150deg);
}
.door .handle{
  width: 5px;
  height: 50px;
  border-radius: 12px;
  background-color: rgba(223, 195, 195, 0.6);
  position: absolute;
  top: 45%;
  right: 10px;
}
.door2 > .handle{
  left: 10px;
}