How Can I Create Overlapping Inline Images Using Flexbox?

Overlapping Inline Images Effectively Using Flexbox

In the pursuit of creating a visually captivating display of overlapped inline images, a combination of CSS and HTML can be employed to achieve the desired effect.

CSS Styling

For optimal results, apply styles to an encompassing div that contains the avatar images. Utilizing flexbox, set the display property to inline-flex and configure the flex direction to row-reverse, thus aligning the images from right to left.

Additionally, define individual avatar containers with a relative positioning and assign them a consistent width and circular border using border-radius. To prevent images from spilling out of their containers, set overflow to hidden.

To enhance the overlapping effect, adjust the margin of each avatar, excluding the last one, to a negative value.

Within each avatar container, specify image dimensions and ensure they are displayed as blocks.

HTML Markup

Within the div designated for avatars, include any number of span elements that represent individual avatars. Each span should contain an image with the appropriate src attribute to display the desired photo.

Example Code

<code class="css">.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
}

.avatar {
  position: relative;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
}

.avatar:not(:last-child) {
  margin-left: -60px;
}

.avatar img {
  width: 100%;
  display: block;
}</code>

<code class="html"><div class="avatars">
  <span class="avatar">
    <img src="https://picsum.photos/70">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/80">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/90">
  </span>
  <span class="avatar">
    <img src="https://picsum.photos/100">
  </span>
</div></code>

The above is the detailed content of How Can I Create Overlapping Inline Images Using Flexbox?. For more information, please follow other related articles on the PHP Chinese website!