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;
}
.side.left {
  left: 0;
}
.side.left: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);
}
.side.left:hover ~ .wrapper .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);
}
.side.right {
  right: 0;
}
.side.right: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);
}
.side.right:hover ~ .wrapper .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 0.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;
}