Back
Elevate your UI with engaging avatar images that glow on hover, offering both visual appeal and intuitive interactivity.
<div class="avatar-container">
<img src="https://randomuser.me/api/portraits/women/47.jpg" alt="User Avatar" class="avatar" />
<div class="username">Alex Johnson</div>
</div>
The container is given the class avatar-container, while the image itself has the class avatar. Additionally, we include a <div> with the username beneath the image to display the user's name within the avatar context.
.avatar-container {
position: relative;
display: inline-block;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
By setting the display property to inline-block and text-align to center, we ensure that our image and username are centered within the container. The position is set to relative to allow for precise positioning of inner elements if needed.
Next, we add interactivity using the hover pseudo-class.
.avatar-container:hover {
transform: scale(1.1);
}
This CSS block ensures that when users hover over the avatar, it gently scales up by 10%, providing a robust visual prompt for interactivity. The transform property works with the scale function, giving the component a lively pop-out effect.
Now, let’s address the avatar class for the image styling:
.avatar {
border-radius: 50%;
border: 3px solid #008cba;
width: 100px;
height: 100px;
transition: box-shadow 0.3s ease-in-out;
}
The border-radius is set to 50% to create a perfect circular cropping around the avatar image, alluding to a universally recognized avatar shape. The circular view is enhanced with a distinct 3px solid border of color #008cba, ensuring that user profiles are highlighted. The width and height are both limited to 100 pixels for uniformity across UI components.
Further enhancing interactivity, on hover, we add a glowing box shadow:
.avatar-container:hover .avatar {
box-shadow: 0 0 15px #00d1b2;
}
This CSS block activates when any user hovers over the avatar container. It adds a glow effect using the box-shadow property. The subtle transition of 0 to 15-pixel shadow radius draws the user's attention with a blend of aesthetics and functionality, achieved by an ethereal hue of #00d1b2.
Lastly, our username styling:
.username {
margin-top: 10px;
font-size: 14px;
color: #333;
}
The username text is positioned directly beneath the avatar image by introducing a margin-top of 10 pixels for spacing. We set the font-size to 14 pixels for readability, with the color attribute being a muted #333, in keeping with user interface standards for text that is informative but not overpowering.
And with that, your interactive avatar component is complete.
<div class="avatar-container">
<img src="https://randomuser.me/api/portraits/women/47.jpg" alt="User Avatar" class="avatar" />
<div class="username">Alex Johnson</div>
</div>
<style>
.avatar-container {
position: relative;
display: inline-block;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.avatar-container:hover {
transform: scale(1.1);
}
.avatar {
border-radius: 50%;
border: 3px solid #008cba;
width: 100px;
height: 100px;
transition: box-shadow 0.3s ease-in-out;
}
.avatar-container:hover .avatar {
box-shadow: 0 0 15px #00d1b2;
}
.username {
margin-top: 10px;
font-size: 14px;
color: #333;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!