Back
Learn how to build a contemporary square avatar with customizable corner radius, hover effects, and clean flat design.
<div class="avatar-container">
<div class="square-avatar">
<img src="..." alt="Profile photo">
<div class="avatar-overlay">
<span class="avatar-username">Alex Morgan</span>
</div>
</div>
</div>
The image source URL should point to the user's profile picture. We've used a sample image from Unsplash for demonstration purposes. The username in the span should be replaced with the actual user's name.
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
Next, we style the square avatar with CSS variables for easy customization. Unlike traditional circular avatars, we're using a square with rounded corners for a modern, minimalist look:
.square-avatar {
--avatar-size: 90px;
--corner-radius: 12px;
--overlay-color: rgba(30, 41, 59, 0.8);
position: relative;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: var(--corner-radius);
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.square-avatar:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}
The key properties here:
- A custom, larger avatar size (90px) to take advantage of the square format
- Rounded corners with a 12px radius for a soft look
- A subtle layered box-shadow for depth
- A hover animation that lifts the avatar up and enhances the shadow
For the image itself, we ensure it covers the container properly:
.square-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
Now we add the overlay that appears on hover, sliding up from the bottom:
.avatar-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--overlay-color);
color: white;
padding: 8px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.square-avatar:hover .avatar-overlay {
transform: translateY(0);
}
The overlay is positioned at the bottom of the avatar but is initially hidden (translateY(100%) pushes it below the visible area). When the user hovers over the avatar, the overlay slides up into view.
Finally, we style the username text inside the overlay:
.avatar-username {
font-family: sans-serif;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
text-align: center;
}
We use text-overflow: ellipsis to handle cases where the username might be too long for the available space.
This square avatar offers several advantages over traditional circular avatars:
- More content visibility: The square format shows more of the profile image, especially for photos with multiple subjects or background context.
- Modern aesthetic: Slightly rounded squares align with contemporary design trends seen in platforms like Instagram and Twitter.
- Information display: The overlay provides a clean way to show the username without taking up additional space in the UI when not needed.
- Interactive engagement: The hover effects create a tactile, interactive feel that encourages user engagement.
- Versatile application: This design works well in both grid layouts and list views, adapting to different UI contexts.
This avatar design is particularly well-suited for media-focused platforms, portfolio sites, design showcases, and modern web applications that want to break away from the ubiquitous circular avatar format.
<div class="avatar-container">
<div class="square-avatar">
<img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Profile photo">
<div class="avatar-overlay">
<span class="avatar-username">Alex Morgan</span>
</div>
</div>
</div>
<style>
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
.square-avatar {
--avatar-size: 90px;
--corner-radius: 12px;
--overlay-color: rgba(30, 41, 59, 0.8);
position: relative;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: var(--corner-radius);
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.square-avatar:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}
.square-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.avatar-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--overlay-color);
color: white;
padding: 8px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.square-avatar:hover .avatar-overlay {
transform: translateY(0);
}
.avatar-username {
font-family: sans-serif;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
text-align: center;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!