Back
Master the art of designing a distinctive circular avatar with interactive border transitions upon hovering.
<div class="avatar-container">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar">
</div>
</div>
The outer <div> with class "avatar-container" is used to center the avatar on the page. Inside it, the "avatar" <div> wraps the <img> tag.
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
The container has a height of 200px, providing enough space to center the avatar. We use flexbox for centering, setting `justify-content` and `align-items` to `center`.
Next, we style the avatar itself. Our goal is to make it circular with a transitioning border on hover.
.avatar {
border-radius: 50%;
overflow: hidden;
border: 5px solid #3498db;
width: 100px;
height: 100px;
transition: border-color 0.3s ease;
}
By setting `border-radius` to 50%, we turn the square avatar into a perfect circle. `overflow: hidden;` ensures that any image overflow is clipped. The initial border color is set to `#3498db`, and the dimensions are set to 100px each.
We use CSS transitions to create a smooth border-color animation. The transition effect will take 0.3 seconds and will ease in and out effortlessly.
To ensure the image inside adapts to the circle and remains centered:
.avatar img {
width: 100%;
height: auto;
display: block;
}
This keeps the image responsive, adjusting the width to 100% while keeping the aspect ratio intact, thanks to `height: auto;`. Setting `display: block;` removes unnecessary gaps around the image.
.avatar:hover {
border-color: #2ecc71;
}
Upon hovering, the border color transitions from `#3498db` to `#2ecc71`, a pleasant shift from blue to green. As configured earlier, this transition happens smoothly thanks to our CSS rule.
With this setup, our circular avatar provides a seamless user experience with an attractive visual effect that dynamically engages site visitors.
By practicing these foundational techniques—using CSS for responsive design, transitions, and layout—you can enhance this component further or apply these principles to new components.
<div class="avatar-container">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar">
</div>
</div>
<style>
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.avatar {
border-radius: 50%;
overflow: hidden;
border: 5px solid #3498db;
width: 100px;
height: 100px;
transition: border-color 0.3s ease;
}
.avatar img {
width: 100%;
height: auto;
display: block;
}
.avatar:hover {
border-color: #2ecc71;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!