7 אפקטים לתמונות באתר - חיים, ומהירים (בלי תוסף)

img { animation: kb var(--dur,14s) ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1) translate(0,0); }
  to { transform: scale(1.15) translate(-3%,-3%); } }

img { clip-path: inset(0 0 0 100%);
  transition: clip-path var(--dur,1s) cubic-bezier(.16,1,.3,1); }
.go img { clip-path: inset(0 0 0 0); }

img { filter: blur(20px); transform: scale(1.05);
  transition: filter var(--dur,1.2s), transform var(--dur,1.2s); }
.go img { filter: blur(0); transform: none; }

.frame { overflow: hidden; }
img { transition: transform .5s ease; }
.frame:hover img { transform: scale(var(--zoom, 1.2)); }

img { filter: grayscale(1) contrast(1.1);
  transition: filter var(--dur,.4s); }
.frame:hover img { filter: grayscale(0); }

frame.onpointermove = e => {
  const r=frame.getBoundingClientRect();
  const x=(e.clientX-r.left)/r.width-.5, y=(e.clientY-r.top)/r.height-.5;
  frame.style.transform=`perspective(700px)
    rotateY(${x*max}deg) rotateX(${-y*max}deg)`; };

/* dark image; a soft light circle follows the cursor */
.frame::after { background: radial-gradient(
  var(--spot,150px) circle at var(--x) var(--y),
  transparent, rgba(0,0,0,.72)); }