Parallax Tilt

<!-- Parallax Tilt — pure-CSS uses fixed angle on hover.
     For pointer-tracked tilt, see the JS tab. -->
<figure class="nuda-tilt">
  <img class="nuda-tilt__img" src="/your-image.jpg" alt="" />
  <span class="nuda-tilt__shine"></span>
</figure>

/* Parallax Tilt
   3D tilt on hover with a gloss highlight overlay.
   Customize: --tilt-angle, --tilt-perspective */

.nuda-tilt {
  --tilt-angle: 12deg;
  --tilt-perspective: 700px;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
  perspective: var(--tilt-perspective);
  cursor: pointer;
}

.nuda-tilt__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nuda-tilt__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.nuda-tilt:hover .nuda-tilt__img {
  transform:
    rotateY(calc(var(--tilt-angle) * -1))
    rotateX(calc(var(--tilt-angle) * 0.6))
    scale(1.05);
}

.nuda-tilt:hover .nuda-tilt__shine { opacity: 1; }

/* Parallax Tilt — pointer-tracked variant.
   Drop this in to make the tilt follow the cursor. */

(function () {
  document.querySelectorAll('.nuda-tilt').forEach(function (el) {
    var img = el.querySelector('.nuda-tilt__img');
    if (!img) return;

    el.addEventListener('mousemove', function (e) {
      var r = el.getBoundingClientRect();
      var px = (e.clientX - r.left) / r.width  - 0.5;
      var py = (e.clientY - r.top)  / r.height - 0.5;
      img.style.transform =
        'rotateY(' + (px * -16) + 'deg) ' +
        'rotateX(' + (py *  12) + 'deg) ' +
        'scale(1.05)';
    });

    el.addEventListener('mouseleave', function () {
      img.style.transform = '';
    });
  });
})();