Overlapping multiple circular images using Flexbox or Grid

Question

I'm trying to create overlapping badges using either grid or flexbox, I'm not able to achieve it correctly.

I want something like this

 <div class="grid">
    <img src="" alt="" class="image">
    <img src="" alt="" class="image">
</div>

This is the CSS, it doesn't work

.grid
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
}

.image
{
    grid-row: 1 / 2;
    align-self: center;
}

.image:nth-child(odd)
{
    grid-column: 1 / 3;
}

.image:nth-child(even)
{
    grid-column: 2 / -1;
}

I know this isn't much to go on but I'm really bad at CSS, some advice is appreciated. Thanks

In general you should stack the images and then adjust the offset using margins — Paulie_D, Apr 23 '21 at 18:40
I understand thanks. Is there any resource, you recommend that I can follow? — Shivam, Apr 23 '21 at 18:41
Nope...but I'm sure you can search Google or Stack Overflow for something similar — Paulie_D, Apr 23 '21 at 18:44
Which part of the code makes it circular? The image or not added `border-radius`? — m4n0, Apr 23 '21 at 18:46
Images I have are already circular, it's just a layout (overlapping images) issue — Shivam, Apr 23 '21 at 18:47

m4n0 · Accepted Answer · 2021-04-23T19:02:31.053

You can make use of transform property to adjust each element by X or Y position.

If you want to overlap from first, then you can always modify the DOM order or even the z-index.

.images-container {
  display: flex;
  margin-bottom: 20px;
}

.images-container.vertical {
  flex-direction: column;
}

.circular-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.circular-image:nth-child(2) {
  transform: translateX(-50px);
}

.stack-from-left .circular-image:nth-child(2) {
  z-index: -1;
}

.circular-image:nth-child(3) {
  transform: translateX(-100px);
}

.stack-from-left .circular-image:nth-child(3) {
  z-index: -2;
}

.circular-image:nth-child(4) {
  transform: translateX(-150px);
}

.stack-from-left .circular-image:nth-child(4) {
  z-index: -3;
}

.vertical .circular-image:nth-child(2) {
  transform: translateY(-50px);
}

.vertical .circular-image:nth-child(3) {
  transform: translateY(-100px);
}

.vertical .circular-image:nth-child(4) {
  transform: translateY(-150px);
}

<div class="images-container">
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
</div>

<div class="images-container stack-from-left">
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
</div>

<div class="images-container vertical">
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
  <div class="circular-image">
    <img src="https://thispersondoesnotexist.com/image" alt="" class="circular-image">
  </div>
</div>

Thanks, but this must be too much to ask but I can you show me how the overlapping from first would work. Again I'm really new at CSS — Shivam, Apr 23 '21 at 19:01
Thank you so much, 1 last question, if the incoming images are unknown is there a way to make it dynamic? — Shivam, Apr 23 '21 at 19:05
@ShivamSood But that is not part of the layout problem. You can open a new question so that there is no mix-up. — m4n0, Apr 23 '21 at 19:06
@ShivamSood please don't open a new question for the same issue, to add another requirement. I added a duplicate that cover unknown number of elements — Temani Afif, Apr 23 '21 at 19:43
@TemaniAfif That looked like Shivam was asking for a script which would make the source of images dynamic. Outside of CSS scope. Otherwise, your solution fits fine. — m4n0, Apr 24 '21 at 04:37

Overlapping multiple circular images using Flexbox or Grid

1 Answers1