In the previous post we showed text and heading effects. Now it is the images’ turn - and the principle is the same here too: a beautiful effect and speed are not a contradiction.

Every effect below runs on the same image, live, with no plugin - just CSS and a little vanilla JavaScript. The image itself is optimized and lazy-loaded, so the page stays fast. Play with the effects (there is a “Replay” button, and the interactive ones respond to your mouse hover), and if something fits your site - one click and we know exactly what.

All effects respect the prefers-reduced-motion setting - for anyone who asked for less motion, the image shows normally with no animation.

Image & media effects

Ken Burnsken-burns

LoopBackground images and hero headers - subtle cinematic motion

SpeedFastSlow
Demo image - a getaway villa
Want this? →
Show code
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%); } }

Reveal Wipereveal-wipe

OnceBringing an image in as you scroll to it

SpeedFastSlow
Demo image - a getaway villa
Want this? →
Show code
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); }

Blur Upblur-up

OnceA fast-loading feel - blurred, sharpening into focus

SpeedFastSlow
Demo image - a getaway villa
Want this? →
Show code
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; }

Hover Zoomhover-zoom

InteractiveCards and galleries - a gentle zoom on hover

↖ Hover to tilt
IntensitySubtleStrong
Demo image - a getaway villa
Want this? →
Show code
.frame { overflow: hidden; }
img { transition: transform .5s ease; }
.frame:hover img { transform: scale(var(--zoom, 1.2)); }

Color on Hoverduotone

InteractiveElegant galleries - black-and-white waking into color

↖ Hover to tilt
SpeedFastSlow
Demo image - a getaway villa
Want this? →
Show code
img { filter: grayscale(1) contrast(1.1);
  transition: filter var(--dur,.4s); }
.frame:hover img { filter: grayscale(0); }

Hover Tiltimg-tilt

InteractiveProduct images - 3D depth that follows the cursor

↖ Hover to tilt
IntensitySubtleStrong
Demo image - a getaway villa
Want this? →
Show code
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)`; };

Spotlightspotlight

InteractiveDramatic images - a light that follows the mouse

↖ Hover to tilt
IntensitySubtleStrong
Demo image - a getaway villa
Want this? →
Show code
/* 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)); }

Onward

This is the second category in the menu - images and media. There are already text and heading effects, and next we’ll add effects for buttons, whole sections and backgrounds.

Want a few of these effects on your site? They are part of the build with us - let’s talk and we’ll put together exactly what fits.