Back

Building an Interactive Hoverable Avatar Stack

Step-by-step guide to creating a dynamic avatar stack that expands on hover, showcasing additional team members.

HTML

In our HTML structure, we need a container to hold our avatar stack. Inside this container, we'll place multiple avatar images, each representing a team member.

        <div class="avatar-container">
          <div class="avatar-stack">
            <img src="https://randomuser.me/api/portraits/med/men/75.jpg" alt="Avatar 1" class="avatar">
            <img src="https://randomuser.me/api/portraits/med/women/65.jpg" alt="Avatar 2" class="avatar">
            <img src="https://unsplash.com/photos/iFgRcqHznqg/download?force=true&w=640" alt="Avatar 3" class="avatar">
            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fHZpcnR1YWwlMjBwcm9maWxlfGVufDB8fHx8MTY4NzA0MDkyMg&ixlib=rb-4.0.3&q=80&w=400" alt="Avatar 4" class="avatar">
          </div>
        </div>

CSS

Our CSS takes care of the styling. We begin by styling the overall avatar container to center the avatars on the page using flexbox.

        .avatar-container {
          display: flex;
          justify-content: center;
          margin-top: 50px;
        }

The stack of avatars is also flexbox-enabled for a neat horizontal arrangement, initially overriding each other slightly by using negative margins.

        .avatar-stack {
          display: flex;
          position: relative;
          padding: 10px;
          transition: all 0.3s ease;
        }

Each avatar is styled with consistent sizing and image that covers the size, the round shape being achieved through a 50% border-radius, and a small white border adds a polished separation. The shadow provides depth, emphasizing the layering effect. Note the use of transitions for smooth effects when the avatar is hovered.

        .avatar {
          width: 50px;
          height: 50px;
          object-fit: cover;
          border-radius: 50%;
          border: 2px solid #fff;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          margin-left: -10px;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          cursor: pointer;
        }

Here we enhance interactivity. Hovering causes the avatar to lift slightly upward (transforming along the Y-axis) and grow in size (scaling), simulating a jump effect for attention. The shadow grows too, enhancing the hovering effect.

        .avatar:hover {
          transform: translateY(-10px) scale(1.1);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

By using CSS, we achieve a performant, dynamic effect that responds directly on hover, offering a delightful user experience without relying on JavaScript. If you need additional functionality, JavaScript can be included later based on user interactions.

Conclusion

Through simple CSS enhancements, you created an appealing avatar stack that can present your team or user identities in a neat and engaging manner. As you hover over each avatar, you'll see a smooth transition effect that emanates professionalism and attention to detail.

Whole code

<div class="avatar-container">
  <div class="avatar-stack">
    <img src="https://randomuser.me/api/portraits/med/men/75.jpg" alt="Avatar 1" class="avatar">
    <img src="https://randomuser.me/api/portraits/med/women/65.jpg" alt="Avatar 2" class="avatar">
    <img src="https://unsplash.com/photos/iFgRcqHznqg/download?force=true&w=640" alt="Avatar 3" class="avatar">
    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fHZpcnR1YWwlMjBwcm9maWxlfGVufDB8fHx8MTY4NzA0MDkyMg&ixlib=rb-4.0.3&q=80&w=400" alt="Avatar 4" class="avatar">
  </div>
</div>


<style>
.avatar-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.avatar-stack {
  display: flex;
  position: relative;
  padding: 10px;
  transition: all 0.3s ease;
}
.avatar {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-left: -10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.avatar:hover {
  transform: translateY(-10px) scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

</style>

Building an Interactive Hoverable Avatar Stack

HTML

CSS

Conclusion

Whole code

Comments

More avatars

Similar

See also