← All elements
<div class="sg"><i style="--c:#f43f5e"></i><i style="--c:#f59e0b"></i><i style="--c:#10b981"></i><i style="--c:#0ea5e9"></i><b>+8</b></div>About this hover effect
Overlapping avatars with a white ring and a plus-count chip; hovering spreads them apart.
How it works
Avatars overlap through a negative left margin and each has a white border so they stay distinct. On hover the margins turn positive with a springy transition, which fans the group out.
Ways to customise it
- Add more avatars.
- Change +8 to the real count.
- Use photos in place of the gradients.
Good to know
Provide a text list of members for assistive technology. Overlap hides part of each face, so keep key content visible.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.