Overlapping Avatar Stack
An overlapping avatar group with a hover lift and an overflow counter.
<div class="av-stack"><span class="av" style="background:#ff7a18">JD</span><span class="av" style="background:#5b6cff">AL</span><span class="av" style="background:#16a34a">MK</span><span class="av" style="background:#a855f7">RS</span><span class="av more">+5</span></div>body{background:#f6f7fa}
.av-stack{display:flex}
.av{width:46px;height:46px;border-radius:50%;border:3px solid #f6f7fa;margin-left:-14px;display:grid;place-items:center;color:#fff;font:700 14px/1 system-ui,sans-serif;transition:transform .2s}
.av:first-child{margin-left:0}
.av:hover{transform:translateY(-6px);z-index:2}
.av.more{background:#e2e6ef;color:#5a627a}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.