'What is the appropriate method to create this icon layout in CSS? [closed]

See the photo icons below:

enter image description here

If I'm just using vanilla HTML/CSS (no frameworks etc.), would the best way to create these overlapping icons be to use flexbox with negative margin-left for each img?

Or just use inline-block for each image and give negative margins to each one?

htmlcsstypescriptwordpress-gutenberggutenberg-blocks


Solution 1:[1]

The method I would recommend would be using flexbox as you suggested because it will give you more flexibility to adjust the layout easily in the future if needed. Here's the snippet to show how I would approach the image overlay using simple HTML/CSS:

.profile-image__wrapper {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-image__wrapper li {
  margin-left: -1rem;
}

.profile-image__wrapper li:first-child {
  margin-left: 0;
}

.profile-image__wrapper img {
  width: 50px;
  height: auto;
  max-width: 100%;
  border-radius: 50px;
  border: 5px solid #ffffff;
}
<ul class="profile-image__wrapper">
  <li><img src="https://i.pinimg.com/originals/e4/03/de/e403de788507db2505774f48f70a8eab.png"></li>
  <li><img src="https://i.pinimg.com/originals/e4/03/de/e403de788507db2505774f48f70a8eab.png"></li>
  <li><img src="https://i.pinimg.com/originals/e4/03/de/e403de788507db2505774f48f70a8eab.png"></li>
  <li><img src="https://i.pinimg.com/originals/e4/03/de/e403de788507db2505774f48f70a8eab.png"></li>
  <li><img src="https://i.pinimg.com/originals/e4/03/de/e403de788507db2505774f48f70a8eab.png"></li>
</ul>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Edgar Reynaga

Related Questions