Add an avatar stack to WordPress

A row of overlapping, ringed photos of people, followed by a +N pill and a short line. On hover, the face you point at rises to the front.

Get Grinner free

See it live

Type

A Grinner block

Find it

Press + and search “Avatar Stack”

Phones

Faces shrink together, they never wrap

Speed

No script at all

Live demo

Faces in a row.

This is the real Avatar Stack block, running on this page.

Your customers could go here

Settings Layout Arc Hover effect Lift Avatar size (px) 64

What you can change

The settings worth knowing.

Shape the row, then decide what happens on hover.

Straight

Arc

Layout

Straight or arc

A straight row, or an Arc that curves like a hand of cards, with its own depth.

Point at a face

Hover effect

How faces react

Lift raises the face, Arc lets neighbors follow, Fan curves and spreads the row.

Shape

Circles or squares

Circle or rounded square, from 16 to 200px, with a colored ring.

Real total (optional)

A +N pill

Show a +N chip from the number of extra people you enter.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Add Avatar Stack

Press + and search for Avatar Stack, then add your photos.

3

Set the row

Choose a size, an overlap and a hover, add the +N pill and a line, then publish.

Good to know

Fair questions.

The Avatar Stack is a Grinner block that shows a row of overlapping, ringed photos of people, followed by a +N pill and a short line. On hover, the face you point at rises to the front. Use it to show that real people already use or love what you offer.

No. Faces aren’t links, and they’re all the same size.

The faces never wrap onto a second line. They shrink together.

Only with their permission, and only real numbers in the label. Made-up proof does more harm than good.

No rise, curve or spread. The face you point at still comes to the front.