<div class="avatar-group">
<img src="https://placehold.co/100x100/3b82f6/ffffff?text=A" alt="User 1">
<img src="https://placehold.co/100x100/ec4899/ffffff?text=B" alt="User 2">
<img src="https://placehold.co/100x100/10b981/ffffff?text=C" alt="User 3">
<img src="https://placehold.co/100x100/f59e0b/ffffff?text=D" alt="User 4">
<div class="more-count">+5</div>
</div>
.avatar-group {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
align-items: center;
}
.avatar-group img {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid #fff;
margin-left: -12px;
object-fit: cover;
transition: transform 0.2s;
position: relative;
z-index: 1;
}
.avatar-group img:first-child {
margin-left: 0;
}
.avatar-group img:hover {
transform: translateY(-5px);
z-index: 10;
}
.more-count {
width: 48px;
height: 48px;
border-radius: 50%;
background: #f3f4f6;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
border: 3px solid #fff;
margin-left: -12px;
z-index: 0;
}