How to create a profile photos row with css? [duplicate] - html

Question

This question already has answers here:
Overlapping/overlaying multiple inline images
(2 answers)
Closed 4 months ago.
i'm trying to create a row with many photos, example;
but i'm having trouble to create the border radius negative.
like this.
i've been trying in this codepen
CodePen
HTML
<div class="d-flex">
<a class="d-inline">
<img alt="project member" class="rounded-circle thumb48" src="https://i.imgur.com/C7sGXc6.png">
</a>
<div class="d-inline person">
<img alt="project member" class="rounded-circle thumb48" src="https://i.imgur.com/C7sGXc6.png">
</div>
<a class="d-inline">
<img alt="project member" class="rounded-circle thumb48" src="https://i.imgur.com/C7sGXc6.png">
</a>
</div>
CSS
.thumb48{
width: 48px !important;
height: 48px !important;
}
.rounded-circle{
border-radius: 50% !impor
}
.d-flex{
display:flex !important;
}
.d-inline{
display: inline !importante;
}
.person{
background-color:red;
position:relative;
}
.person:before
{
width: 10px;;
height: 68px;
border-radius:0 50% 50% 0;
background-color:#FFF;
display:inline-block;
vertical-align: middle;
content: '';
}

Answer 1

You can achieve this cutout effect by putting a solid border on each image that is the same colour as the background:
<div class="circle-overlap">
<img alt="project member" src="https://i.imgur.com/C7sGXc6.png">
<img alt="project member" src="https://i.imgur.com/C7sGXc6.png">
<img alt="project member" src="https://i.imgur.com/C7sGXc6.png">
</div>
.circle-overlap img {
width: 50px;
border-radius: 50%;
border: solid white 5px; // Change to a different colour to visualise more clearly what’s happening
margin-right: 2px;
position: relative;
background: teal;
}
.circle-overlap img:nth-of-type(2) {
left: -25px;
z-index: -1;
}
.circle-overlap img:nth-of-type(3) {
z-index: -2;
left: -50px;
}