CSS Avatars & Images Effects

Initials avatar with a soft blue halo that widens on hover.

Avatar wrapped in a rotating ocean conic ring — the "story" ring pattern, in pure CSS.

Image tile that zooms under a darkening scrim while the caption slides up — swap the gradient for your own <img>.

Media tile that sits in grayscale until hover, then restores full ocean color.

Overlapping avatar group in ocean that fans out on hover, with an overflow chip.

Blue avatar with an online dot that emits a ring — the presence pattern every collaborative app ships.

Editorial thumbnail with a grain-textured ocean image, bottom scrim and eyebrow tag — swap the gradient for an <img>.

Initials avatar inside a rotating ocean conic ring, with a pinging online dot.

Media tile whose caption bar slides up from below the frame on hover while the highlight drifts, marked up as a real figure and figcaption.

Four-segment ring turning around the avatar while the face counter-rotates at the same rate, so the initials stay upright.

Instant-photo mount tilted off-axis that straightens and develops on hover, the caption in monospace on the wide bottom margin.

Overlapped stack with a counted overflow chip, each face lifting out of the pile on hover with a background-colored ring keeping the seams clean.

Media tile whose controls rise into a dimmed frame on a stagger, using `transition-delay` so the sequence costs no keyframes.

Profile photo wrapped in a conic progress ring that fills as the upload lands, with a camera affordance notched out of the lower-right corner.

Three prints squared up as one pile that spread from a shared bottom pivot, so the fan opens like a hand of cards rather than sliding apart in parallel.

Voice-call avatar with rings that ripple outward from the disc to show the person is currently speaking.

Squircle initial avatars in per-person gradients, each rounding to a full circle and lifting when hovered.

Band of member avatars that scrolls endlessly behind a soft fade at each edge, freezing under the pointer while every face grows and takes a blue rim.

Asymmetric three-up where the hero spans both rows, each tile lifting independently so the grid never reflows on hover.

Blurred low-resolution stand-in sitting under the full image, the sharp layer fading over it and the status pill dropping out once there is nothing left to wait for.

The state every gallery eventually shows and few designs draw — a torn picture glyph over a hatched field, with the filename kept so the failure is diagnosable.

Compact avatar-and-name pill that stretches on hover to reveal the person’s team beside their name.

Image tile under a slow Ken Burns pan and zoom that reverses at each end, with a gradient caption pinned to the foot.

Before-and-after frame split by a draggable-looking divider that travels right on hover, wiping the flat ungraded shot away to expose the colour-graded version underneath.

Avatar wrapped in a checkbox label that shrinks inside a solid ring and sprouts a check badge when selected.

Thumbnail grid where hovering anywhere greys the whole set, and the tile under the cursor keeps its colour and grows.

Five narrow photo slices where the hovered one expands to more than three times its share and lights up while the rest dim, its caption rising from the bottom edge.

Initials on a gradient hexagon with a teal rim, the tile rotating a notch on hover while the letters stay upright.

Profile header with a gradient cover that shifts on hover while the circular avatar straddling its edge lifts and grows.

Photo under a crop tool: corner handles and rule-of-thirds guides frame a square selection that stretches to a widescreen box on hover while the pixel readout swaps beneath it.

Ringed initials avatar with a verified check badge tucked into the corner that pops larger on hover.

Circular avatar showing initials that flips over in 3D on hover to reveal the name and role on its back.