<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS avatar scale</title>
<style>
.avatar {
width: 150px;
height: 150px;
background-size: cover;
border: 5px solid black;
border-radius: 50%;
cursor: pointer;
position: relative;
background-image: url("./girl.png");
}
.avatar::before, .avatar::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
}
.avatar::before {
background-color: rgba(0, 0, 0, 0.3);
}
.avatar::after {
background: inherit;
clip-path: circle(0% at 50% 50%);
transition: 0.3s;
}
.avatar:hover::after {
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div class="avatar"></div>
</body>
</html>