My current challenge involves cropping an image into a circle, applying a gray filter, and overlaying text on top. The issue I'm facing is that the size of the circular clip-path changes based on the original image's dimensions due to user-uploaded profile pictures. This variability prevents me from properly applying the gray filter. Any suggestions on how to resolve this? Ultimately, I want the image on the right to appear as a circular grey-filtered image.
Explore the code on CodePen: https://codepen.io/dansbyt/pen/wvzyJzj
HTML:
<div class="center">
<img class='pic large primary' src='../resources/pics/23.png'>
<div class='picgroup large'>
<div class='count'>+14</div>
<img class='pic large secondary' src='../resources/pics/81.png'>
</div>
</div>
CSS:
.pic {clip-path: circle();}
.primary {z-index: 3}
.secondary {z-index: 0; margin-left: -50px; margin-bottom: -30px}
.large.primary {width: 220px}
.large.secondary {width: 170px}
.small.primary {width: 150px}
.small.secondary {width: 116px}
.pic img{float:right; max-width: 100%; max-height: 100%; display: block;}
.center {
display: flex;
justify-content: center;
align-items: center;}
.secondary img{object-fit: cover}
.picgroup {position: relative}
.small.picgroup:before {
width:116px; height: 116px;
margin-top: 20px;}
.large.picgroup:before {
width:150%; height: 150%;
margin-top: -30px;}
.picgroup:before {
content:"";
position: absolute;
top:0; left:0;
margin-left: -50px;
clip-path: circle();
background: rgba(0,0,0,0.5);
z-index: 2;
}
.picgroup .count {
font-size: 50px;
color: #E5E5E5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-65%, -50%);
z-index: 2;}