Имеется такой код, проблема заключается в том, что он затеменяет весь div а не круг.
Как его отредактировать так, что бы затемняло только круг, при этом что-бы в html был и текст (который отображается при наведении) и само изображение (оно будет вставляться скриптом)
.chat-avatar {
position: relative;
display: block;
}
.chat-avatar img {
display: block;
}
.chat-avatar p {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
background-color: rgba(0,0,0,.5);
color: #fff;
text-align: center;
transition: opacity .3s ease;
}
.chat-avatar:hover p {
opacity: 1;
}
rounded-circle {
border-radius: 50%!important;
}
<div class="col-auto chat-avatar">
<img src="/img/uploads/default.png" width="100px" class="rounded-circle">
<p class="font-size-24"><i class="fa-solid fa-camera"></i></p>
</div>
Код на codepen.io 
