Back
Master the art of creating circular avatar images with an elegant hover effect using pure CSS for a visually engaging UI component.
<div class="avatar-container">
<img src="https://randomuser.me/api/portraits/men/81.jpg" alt="Avatar Image" class="avatar">
</div>
The <img> tag is used here to load an avatar image from a reliable source. The alt attribute is crucial for accessibility and provides alternative information for an image if a user cannot view it.
.avatar-container {
display: inline-block;
padding: 5px;
border-radius: 50%;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
Here, we set the display property to inline-block to allow for fine-tuned control over padding and size. Padding is set to give the image a little space from the edge. The border-radius is set to 50% to make sure the container and the image inside it become perfectly circular.
The overflow: hidden; ensures that any part of the image that sticks out beyond the circular boundary gets cut off. Finally, a transition property is used to smoothly animate the box-shadow effect on hover.
Next, we style the image itself:
.avatar {
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
The image is given the same circular shape by setting its border-radius to 50% as well. We force the width and height to be the same to maintain the perfect circle regardless of original image dimensions. The transition property is used again, but this time to apply a smooth scaling effect when hovered.
Now, for our hover effects:
.avatar-container:hover {
box-shadow: 0 0 10px 5px rgba(0, 123, 255, 0.5);
}
.avatar-container:hover .avatar {
transform: scale(1.1);
}
By targeting .avatar-container:hover, we add a glowing box-shadow that creates visual interest and highlights the avatar when hovered over. The transform: scale() is used on the image itself to subtly enlarge it during hover, drawing even more attention.
And that's all there is to it. With these simple styles, you have created a professional-looking, responsive circular avatar with an elegant hover effect that enhances user interface interactivity and engagement. Remember, CSS transitions and transforms are powerful tools that can be used to create sophisticated animations while keeping your components lightweight.
<div class="avatar-container">
<img src="https://randomuser.me/api/portraits/men/81.jpg" alt="Avatar Image" class="avatar">
</div>
<script>
// No JavaScript needed for this component!
</script>
<style>
.avatar-container {
display: inline-block;
padding: 5px;
border-radius: 50%;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
.avatar {
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
.avatar-container:hover {
box-shadow: 0 0 10px 5px rgba(0, 123, 255, 0.5);
}
.avatar-container:hover .avatar {
transform: scale(1.1);
}
</style>
Thank you for reading this article.
Comments