Image zoom and colour wake
Images sit slightly muted, then zoom and bloom into full colour on hover, with a caption sliding up.
CSSBeginner
<figure class="fig" tabindex="0"><div class="img"></div><figcaption>Sunset Series</figcaption></figure>.fig{position:relative;width:min(340px,88vw);aspect-ratio:4/3;overflow:hidden;border-radius:14px;margin:0;cursor:pointer}
.img{position:absolute;inset:0;
background:radial-gradient(circle at 70% 30%,#ffd166 0 11%,transparent 12%),linear-gradient(160deg,#e5603a,#8a3a22 65%,#3a0804);
filter:saturate(.35) brightness(.85);transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s}
figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.7));
transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fig:hover .img,.fig:focus-within .img{transform:scale(1.1);filter:none}
.fig:hover figcaption,.fig:focus-within figcaption{transform:none}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Image zoom</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.fig{position:relative;width:min(340px,88vw);aspect-ratio:4/3;overflow:hidden;border-radius:14px;margin:0;cursor:pointer}
.img{position:absolute;inset:0;
background:radial-gradient(circle at 70% 30%,#ffd166 0 11%,transparent 12%),linear-gradient(160deg,#e5603a,#8a3a22 65%,#3a0804);
filter:saturate(.35) brightness(.85);transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s}
figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.7));
transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fig:hover .img,.fig:focus-within .img{transform:scale(1.1);filter:none}
.fig:hover figcaption,.fig:focus-within figcaption{transform:none}
</style></head>
<body>
<figure class="fig" tabindex="0"><div class="img"></div><figcaption>Sunset Series</figcaption></figure>
</body></html>Good for
Galleries, team grids, portfolios and article cards.
Watch out for
Put overflow hidden on the frame, and animate the image inside, not the frame, so the corners stay crisp.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.