Polaroid Develop

<!-- Polaroid Develop -->
<figure class="nuda-ie2-polaroid">
  <div class="nuda-ie2-polaroid__photo">
    <img class="nuda-ie2-polaroid__img" src="/your-image.jpg" alt="" />
  </div>
  <figcaption class="nuda-ie2-polaroid__label">Summer, 1998</figcaption>
</figure>

.nuda-ie2-polaroid {
  width: 170px;
  padding: 10px 10px 30px;
  margin: 0;
  background: #f2efe6;
  border-radius: 2px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.55);
}

.nuda-ie2-polaroid__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #111;
}

.nuda-ie2-polaroid__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) brightness(.35) contrast(1.25);
  opacity: .35;
  animation: _nuda-ie2polaroid 7s ease-in-out infinite;
  will-change: filter,opacity;
}

.nuda-ie2-polaroid__label {
  display: block;
  margin-top: 8px;
  text-align: center;
  font: italic 600 11px Georgia,serif;
  color: #333;
}

@keyframes _nuda-ie2polaroid {
  0%,10% {
    opacity: .35;
    filter: grayscale(100%) brightness(.35) contrast(1.25);
  }
  70%,90% {
    opacity: 1;
    filter: grayscale(0%) brightness(1) contrast(1);
  }
  100% {
    opacity: .35;
    filter: grayscale(100%) brightness(.35) contrast(1.25);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ie2-polaroid__img {
    animation: none !important;
    opacity: 1;
    filter: grayscale(0%) brightness(1) contrast(1);
  }
}