Glitch Hover

<!-- Glitch Hover (RGB-split layers shift on hover) -->
<figure class="nuda-glitch">
  <img class="nuda-glitch__img"                       src="/your-image.jpg" alt="" />
  <img class="nuda-glitch__img nuda-glitch__img--r"   src="/your-image.jpg" alt="" aria-hidden="true" />
  <img class="nuda-glitch__img nuda-glitch__img--g"   src="/your-image.jpg" alt="" aria-hidden="true" />
</figure>

/* Glitch Hover
   Three layers of the same image; on hover, the red/green ghosts shift
   apart and jitter in tandem.
   Customize: --gl-r, --gl-g (the chromatic aberration colors). */

.nuda-glitch {
  --gl-r: rgba(255, 80, 80, 0.6);
  --gl-g: rgba(80, 255, 160, 0.5);
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  cursor: pointer;
  background: #000;
}

.nuda-glitch__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, opacity 0.25s;
}

.nuda-glitch__img--r,
.nuda-glitch__img--g {
  opacity: 0;
  mix-blend-mode: screen;
}

.nuda-glitch__img--r { filter: url(#none); background-color: var(--gl-r); background-blend-mode: lighten; }
.nuda-glitch__img--g { filter: url(#none); background-color: var(--gl-g); background-blend-mode: lighten; }

.nuda-glitch:hover .nuda-glitch__img    { animation: nuda-gl-jit  0.4s steps(2) infinite; }
.nuda-glitch:hover .nuda-glitch__img--r { opacity: 0.7; transform: translate(3px, 0);  animation: nuda-gl-jit-r 0.4s steps(2) infinite; }
.nuda-glitch:hover .nuda-glitch__img--g { opacity: 0.6; transform: translate(-3px, 0); animation: nuda-gl-jit-g 0.4s steps(2) infinite; }

@keyframes nuda-gl-jit   { 0%, 100% { transform: translate(0); }       50% { transform: translate(-1px, 1px); } }
@keyframes nuda-gl-jit-r { 0%, 100% { transform: translate(3px, 0); }  50% { transform: translate(5px, -1px); } }
@keyframes nuda-gl-jit-g { 0%, 100% { transform: translate(-3px, 0); } 50% { transform: translate(-5px, 1px); } }

@media (prefers-reduced-motion: reduce) {
  .nuda-glitch:hover .nuda-glitch__img,
  .nuda-glitch:hover .nuda-glitch__img--r,
  .nuda-glitch:hover .nuda-glitch__img--g { animation: none; }
}