.side.left
.side.right
.wrapper
  .front.image
  .back.image

body {
  background: #111;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content:center;
  width: 100%;
  height: 100vh;
}
.side {
  position: absolute;
  width: 50vw;
  top:0;
  bottom:0;
  z-index: 10;
  &.left {
    left:0;
    &:hover {
      &~.wrapper {
        .front {
          transform: matrix3d(0.94, 0, 0.34, -0.0002, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1) translateX(-10px);
        }
        .back {
          transform: matrix3d(0.94, 0, 0.34, -0.00025, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1) translateX(30px);
        }
      }
    }
  }
  &.right {
    right: 0;
    &:hover {
      &~.wrapper {
        .front {
          transform: matrix3d(0.94, 0, 0.34, 0.0002, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1) translateX(30px);
        }
        .back {
          transform: matrix3d(0.94, 0, 0.34, 0.0005, 0, 1, 0, 0, -0.34, 0, 0.94, 0, 1, 0, 10, 1.1) translateX(-100px);
        }
      }
    }
  }
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.image {
  perspective: 200px;
  transition: all .2s ease;
  background-image: url('https://images.unsplash.com/photo-1504492729478-4ea346b648ae?dpr=1&auto=compress,format&fit=crop&w=376&h=502&q=80&cs=tinysrgb&crop=');
  height: 300px;
  width: 500px;
  background-size: cover;
  box-shadow: 0px 10px 50px rgba(0,0,0,0.8);
}
.front {
  margin-right: 50px;
  z-index: 1;
}
.back {
  margin-left: 100px;
  margin-top: -150px;
  background-position: bottom;
}