<div class="avatar"></div>
 .avatar{
background: url(./OIP-C.jpg) center no-repeat;
width: 200px;
height: 200px;
border-radius: 50%;
cursor: pointer;
object-fit:cover;
position: relative;
}
.avatar::before,.avatar::after{
content:'';
position: absolute;
inset: 0;
border-radius: inherit;
}
.avatar::before{
background: rgba(0, 0,0,0.7);
}
.avatar::after{
background: inherit;
clip-path:circle(0% at 50% 50%);
transition: 0.5s;
}
.avatar:hover::after{
clip-path:circle(50% at 50% 50%)
}