<div class="scd-pol">
  <div class="scd-pol__stage">
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p1"></div><div class="scd-pol__cap">golden hour</div></div>
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p2"></div><div class="scd-pol__cap">low tide</div></div>
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p3"></div><div class="scd-pol__cap">the trail</div></div>
    <div class="scd-pol__polaroid"><div class="scd-pol__photo scd-pol__photo--p4"></div><div class="scd-pol__cap">dusk in june</div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Courier+Prime&display=swap');

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

.scd-pol {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #2b2622 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%232b2622'/%3E%3Ccircle cx='6' cy='6' r='.6' fill='%23413a32'/%3E%3C/svg%3E");
  font-family: 'Courier Prime', monospace;
}
.scd-pol__stage { position: relative; width: 230px; height: 270px; }
.scd-pol__polaroid {
  position: absolute; inset: 0;
  background: #fbf8f0;
  padding: 14px 14px 56px;
  border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  transition: transform .55s cubic-bezier(.2,.8,.3,1.2), box-shadow .4s;
  cursor: pointer;
}
.scd-pol__photo { width: 100%; height: 170px; border-radius: 2px; }
.scd-pol__cap {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem; color: #3a342c;
  text-align: center; margin-top: 10px;
}
.scd-pol__polaroid:nth-child(1) { transform: rotate(-8deg); z-index: 1; }
.scd-pol__polaroid:nth-child(2) { transform: rotate(5deg); z-index: 2; }
.scd-pol__polaroid:nth-child(3) { transform: rotate(-3deg); z-index: 3; }
.scd-pol__polaroid:nth-child(4) { transform: rotate(9deg); z-index: 4; }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(1) { transform: rotate(-22deg) translate(-110px,28px); }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(2) { transform: rotate(-7deg) translate(-38px,-10px); }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(3) { transform: rotate(8deg) translate(38px,-6px); }
.scd-pol__stage:hover .scd-pol__polaroid:nth-child(4) { transform: rotate(20deg) translate(112px,26px); }
.scd-pol__polaroid:hover { box-shadow: 0 26px 50px rgba(0,0,0,.6); z-index: 9 !important; }
.scd-pol__photo--p1 { background: linear-gradient(135deg,#f5a06b,#e2674a); }
.scd-pol__photo--p2 { background: linear-gradient(135deg,#6bb0c4,#3d7d98); }
.scd-pol__photo--p3 { background: linear-gradient(135deg,#9bbf6b,#5f9145); }
.scd-pol__photo--p4 { background: linear-gradient(135deg,#c98bbf,#8d5894); }

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