Back

Creating an Overlapping Group Avatar Component

Learn how to build a modern stacked avatar group for displaying team members or participants with customizable appearance and count indicator.

HTML

The HTML structure for our stacked group avatar consists of a container div with the class "avatar-group" and multiple avatar divs inside it. Each avatar contains either an image or, in the case of the last item, a text indicator showing how many more users are in the group.


        <div class="avatar-group">
          <div class="avatar" style="--bg-color: #A78BFA;">
            <img src="..." alt="Team member">
          </div>
          <div class="avatar" style="--bg-color: #60A5FA;">
            <img src="..." alt="Team member">
          </div>
          <div class="avatar" style="--bg-color: #34D399;">
            <img src="..." alt="Team member">
          </div>
          <div class="avatar more-indicator">
            <span>+2</span>
          </div>
        </div>

Each avatar div has an inline style setting a custom CSS variable (--bg-color) which serves as a fallback background color in case the image fails to load or has transparent areas. For the "more" indicator, we use a span with the count of additional members.

CSS

First, we set up the container for our avatar group. The key here is using flex-direction: row-reverse, which makes the avatars stack from right to left, ensuring the first avatar in the HTML appears rightmost and is visually prominent.


        .avatar-group {
            display: flex;
            flex-direction: row-reverse;
            /* Adjust this value to control spacing */
            --overlap: 16px;
        }

The --overlap CSS variable defines how much each avatar will overlap with its neighbor, making it easy to adjust the spacing across the entire component. Next, we style each individual avatar:


        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid white;
            background-color: var(--bg-color, #E5E7EB);
            margin-left: calc(-1 * var(--overlap));
            position: relative;
            transition: transform 0.2s ease-in-out;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .avatar:first-child {
            margin-left: 0;
        }

The key properties here: - The white border creates a clean separation between overlapping avatars - The negative margin-left creates the overlapping effect - The background-color uses the custom variable or falls back to light gray - A subtle box-shadow adds depth - We reset the margin for the first child (which appears rightmost) to prevent unwanted spacing We add an interactive hover effect that lifts the avatar slightly and brings it to the front:


        .avatar:hover {
            transform: translateY(-5px);
            z-index: 10;
        }

For the images inside avatars, we ensure they cover the circular area properly:


        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

Finally, we style the "more" indicator with a distinct appearance:


        .more-indicator {
            background-color: #F3F4F6;
            color: #6B7280;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: sans-serif;
            font-weight: 600;
            font-size: 14px;
        }

This stacked group avatar component offers several advantages for user interfaces: - Space efficiency: The overlapping design allows displaying multiple users without taking up too much horizontal space. - Visual hierarchy: The right-to-left stacking naturally emphasizes the first few members while still indicating the total group size. - Interactive feedback: The hover effect allows users to focus on individual avatars when needed. - Scalability: The design works well for both small and larger groups, with the count indicator handling overflow gracefully. - Customization: The CSS variables and modular structure make it easy to adjust sizes, colors, and the amount of overlap. This component is particularly useful in collaboration tools, project management software, shared document interfaces, or any application where you need to show group membership or participation in a compact, visually appealing way.

Whole code

<div class="avatar-group">
  <div class="avatar" style="--bg-color: #A78BFA;">
    <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=256&q=80" alt="Team member">
  </div>
  <div class="avatar" style="--bg-color: #60A5FA;">
    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&auto=format&fit=crop&w=256&q=80" alt="Team member">
  </div>
  <div class="avatar" style="--bg-color: #34D399;">
    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=256&q=80" alt="Team member">
  </div>
  <div class="avatar more-indicator">
    <span>+2</span>
  </div>
</div>

<style>
.avatar-group {
  display: flex;
  flex-direction: row-reverse;
  /* Adjust this value to control spacing */
  --overlap: 16px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  background-color: var(--bg-color, #E5E7EB);
  margin-left: calc(-1 * var(--overlap));
  position: relative;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.avatar:first-child {
  margin-left: 0;
}

.avatar:hover {
  transform: translateY(-5px);
  z-index: 10;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.more-indicator {
  background-color: #F3F4F6;
  color: #6B7280;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 14px;
}
</style>

Thank you for reading this article.

Creating an Overlapping Group Avatar Component

HTML

CSS

Whole code

Comments

More avatars

Similar

See also