Iris Reveal

<!-- Iris Reveal -->
<figure class="nuda-ie2-iris">
  <img class="nuda-ie2-iris__img" src="/your-image.jpg" alt="" />
  <span class="nuda-ie2-iris__blades" aria-hidden="true"></span>
</figure>

.nuda-ie2-iris {
  position: relative;
  width: 200px;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
  margin: 0;
}

.nuda-ie2-iris__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  clip-path: circle(0% at 50% 50%);
  animation: nuda-ie2-iris-open 5s ease-in-out infinite;
  will-change: clip-path;
}

.nuda-ie2-iris__blades {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(#0a0a0a 0deg 15deg,transparent 15deg 30deg);
  opacity: .45;
  mix-blend-mode: multiply;
  animation: nuda-ie2-iris-spin 5s linear infinite;
  pointer-events: none;
}

@keyframes nuda-ie2-iris-open {
  0%,8% {
    clip-path: circle(0% at 50% 50%);
  }
  50%,62% {
    clip-path: circle(75% at 50% 50%);
  }
  100% {
    clip-path: circle(0% at 50% 50%);
  }
}

@keyframes nuda-ie2-iris-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ie2-iris__img {
    animation: none !important;
    clip-path: circle(75% at 50% 50%);
  }
  .nuda-ie2-iris__blades {
    animation: none !important;
    opacity: .15;
  }
}