Back
A deep dive into creating a responsive and interactive avatar group component with hover effects and more
<div class="avatar-group">
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/46.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/47.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/48.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/49.jpg');"></div>
<div class="extra-avatar-count">+2</div>
</div>
.avatar-group {
display: flex;
position: relative;
}
This style targets our avatar group container to use flexbox, which helps in aligning our avatars in a single row.
Next, we style individual avatars:
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-size: cover;
border: 2px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-right: -15px;
}
Each avatar is styled to be 50x50 pixels, rounded into a circle using 'border-radius: 50%;'. We apply a box shadow for a subtle depth effect.
The hover effect at:
.avatar:hover {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
Enhances the interaction perception. When you hover over an avatar, it enlarges slightly and the shadow becomes more pronounced.
For the extra avatar count, to represent additional users not shown, we style:
.extra-avatar-count {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
font-size: 1.2rem;
color: white;
border: 2px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
This gives a clear, round background with a central-aligned count of extra avatars, maintaining consistency with our avatar style.
And there you have it, a fully functional, stylish avatar group component that enhances user interaction and improves UI aesthetics by neatly bundling avatar images and giving visual feedback on hover.
<div class="avatar-group">
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/46.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/47.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/men/48.jpg');"></div>
<div class="avatar" style="background-image: url('https://randomuser.me/api/portraits/women/49.jpg');"></div>
<div class="extra-avatar-count">+2</div>
</div>
<style>
.avatar-group {
display: flex;
position: relative;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-size: cover;
border: 2px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-right: -15px;
}
.avatar:hover {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.extra-avatar-count {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
font-size: 1.2rem;
color: white;
border: 2px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!