# 👥 Overlapping Avatars!

**URL:** <https://community.glideapps.com/t/overlapping-avatars/68285>\
**Category:** Community Resources\
**Created:** [November 30, 2023, 11:40pm UTC](https://community.glideapps.com/t/overlapping-avatars/68285 "2023-11-30T23:40:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [November 30, 2023, 11:40pm UTC](https://community.glideapps.com/t/overlapping-avatars/68285/1 "2023-11-30T23:40:00Z")

</div>

![IMG_5315](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a6de9263cc404adfc599fa7e7a2990a4cc380aea.png)

Here’s a relatively easy way to get an overlapping avatars effect.

1. Create a comma separated string of image URLS using a join list column (most likely from a multiple relation)
2. Create a JavaScript column with the code below. Point variable `p1` to the image URL CSV column
3. Create a rich text component and set the source as the JavaScript column

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/778da976a79c3297d7c0d93b3759da67b85382ff.jpeg "Create Overlapping Avatars in Glide") ](https://www.youtube.com/watch?v=NnfKQd_9KpQ)

```auto
function generateHtmlFromCsv(csvString) {
  const imageUrls = csvString.split(',');

  // HTML string with a div to contain the images
  let html = '<div style="position: relative;">';

  // The amount of left offset for each subsequent image to create the overlapping effect
  let offset = 0;

  // Create an img tag with inline CSS for each image URL
  imageUrls.forEach((url, index) => {
    html += `<img src="${url.trim()}" style="position: absolute; left: ${offset}px; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid white; background-color:#fff ${
      index > 0 ? 'z-index: ' + (100 - index) + ';' : ''
    }"/>`;

    // Increment the offset for the next image to overlap
    offset += 30; // Adjust the offset value to control the overlap amount
  });

  // Close the container div
  html += '</div>';

  return html;
}

// CSV string of image URLs
const csvString = p1;

// Call the function and print out the result
return generateHtmlFromCsv(csvString);

```

---

<div class="post-metadata">

**Author:** ![GrumpyRick](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/grumpyrick/32/18079_2.png) [@GrumpyRick](https://community.glideapps.com/u/GrumpyRick)\
**Post date:** [December 1, 2023, 7:01am UTC](https://community.glideapps.com/t/overlapping-avatars/68285/2 "2023-12-01T07:01:08Z")

</div>

Excellent. Thank you.