Stacked User Avatar Group CSS (Code Snippet)

<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;
}

Stacked User Avatar Group CSS

Share Code Snippet