<div class="scd-pinch">
  <div class="scd-pinch__stage">
    <div class="scd-pinch__photo scd-pinch__photo--ph1"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph2"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph3"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph4"></div>
    <div class="scd-pinch__photo scd-pinch__photo--ph5"></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400&display=swap');

.scd-pinch, .scd-pinch *, .scd-pinch *::before, .scd-pinch *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-pinch {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0c0c0c;
  font-family: 'Geist', sans-serif;
}
.scd-pinch__stage { position: relative; width: 280px; height: 280px; }
.scd-pinch__photo {
  position: absolute; top: 50%; left: 50%;
  width: 130px; height: 170px;
  border-radius: 12px;
  border: 5px solid #fff;
  box-shadow: 0 16px 30px rgba(0,0,0,.6);
  transition: transform .65s cubic-bezier(.3,1.3,.4,1);
  cursor: pointer;
}
.scd-pinch__photo--ph1 { background: linear-gradient(135deg,#ee9ca7,#ffdde1); }
.scd-pinch__photo--ph2 { background: linear-gradient(135deg,#2193b0,#6dd5ed); }
.scd-pinch__photo--ph3 { background: linear-gradient(135deg,#cc2b5e,#753a88); }
.scd-pinch__photo--ph4 { background: linear-gradient(135deg,#42275a,#734b6d); }
.scd-pinch__photo--ph5 { background: linear-gradient(135deg,#f7b733,#fc4a1a); }
.scd-pinch__photo:nth-child(1) { transform: translate(-50%,-50%) rotate(-4deg); z-index: 5; }
.scd-pinch__photo:nth-child(2) { transform: translate(-50%,-50%) rotate(3deg); z-index: 4; }
.scd-pinch__photo:nth-child(3) { transform: translate(-50%,-50%) rotate(-2deg); z-index: 3; }
.scd-pinch__photo:nth-child(4) { transform: translate(-50%,-50%) rotate(5deg); z-index: 2; }
.scd-pinch__photo:nth-child(5) { transform: translate(-50%,-50%) rotate(-6deg); z-index: 1; }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(1) { transform: translate(-150%,-120%) rotate(-16deg); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(2) { transform: translate(40%,-120%) rotate(14deg); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(3) { transform: translate(-50%,-50%) rotate(0deg) scale(1.1); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(4) { transform: translate(-150%,20%) rotate(-12deg); }
.scd-pinch__stage:hover .scd-pinch__photo:nth-child(5) { transform: translate(40%,20%) rotate(18deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-pinch__photo { transition: none !important; }
}