Make Images Overlap in Styled Components

Question

I wanted the images to overlap if images is more than 1. But only show 3 images, then add a circular shape with a plus and the number of images left. My problem is how do I overlap them the correct way?

Something like this

Codesandbox: CLICK HERE

    <div className="resellers">
      {images.slice(0, 2).map((image, i) => (
        <span className="reseller" key={i}>
          <img src={image} alt="" />{" "}
        </span>
      ))}
    </div>
    {images.length > 2 && (
      <div className="plus">
        <span> + {images.length - 2} </span>
      </div>
    )}

Answer 1

Render all the reseller and the plus div elements within the resellers container. You'll want to render the avatars in reverse order so that they can correctly "overlay" the avatar to the right.

Code

<Resellers>
  {!!images.slice(2).length && (
    <ResellerPlus>
      <span>+ {images.slice(2).length}</span>
    </ResellerPlus>
  )}
  {images
    .slice(0, 2)
    .reverse()
    .map((image, i) => (
      <Reseller key={i}>
        <img src={image} alt="reseller" />
      </Reseller>
    ))}
</Resellers>

Styled Components

const Resellers = styled.div`
  display: flex;
  align-items: center;
  flex-direction: row-reverse; // <-- un-reverse avatars
`;

Collect all the common CSS into the "reseller" div.

const Reseller = styled.div`
  align-items: center;
  color: #fff;
  background-color: #bdbdbd;
  border: 4px solid #fff;      // <-- white space around
  border-radius: 50%;          // <-- circle divs
  display: flex;
  flex-direction: row;
  font-family: Nunito-Bold;
  font-size: 1rem;
  height: 40px;
  overflow: hidden;            // <-- hide edges of images
  text-align: center;          // <-- center text
  width: 40px;

  :not(:first-child) {
    margin-right: -0.5rem;     // <-- apply overlap
  }

  img {
    margin-right: 0.5rem;
    object-fit: contain;
  }
`;

const ResellerPlus = styled(Reseller)`
  font-family: Nunito-SemiBold;

  span {
    width: 100%;               // <-- help center text
  }
`;