Mask Reveal

<!-- Mask Reveal -->
<figure class="nuda-mask">
  <img class="nuda-mask__img" src="/your-image.jpg" alt="" />
  <span class="nuda-mask__cover"></span>
</figure>

/* Mask Reveal
   A solid sheet sweeps across, revealing the image underneath.
   Customize: --mask-color, --mask-duration */

.nuda-mask {
  --mask-color: #e4ff54;
  --mask-duration: 1.6s;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  cursor: pointer;
}

.nuda-mask__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.nuda-mask__cover {
  position: absolute;
  inset: 0;
  background: var(--mask-color);
  transform: translateX(-101%);
  animation: nuda-mask-reveal var(--mask-duration) cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.nuda-mask:hover .nuda-mask__img { transform: scale(1); }

@keyframes nuda-mask-reveal {
  0%   { transform: translateX(-101%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-mask__cover { animation: none; transform: translateX(101%); }
}