Overlapping/overlaying multiple inline images

Question

I have a list of images I\'m trying to overlap so that they look similar to this:

My code:

Answer 1

I like Temani's better, but if you can't use flex because you have to support IE 9 or earlier, I'll leave this here.

Note that the text direction is now right to left, so you'll need to reverse the order of your avatars.

.avatar img {
  border-radius: 50%;
  position: relative;
  left: -5px;
  margin-left: -25px;
  z-index: 1;
}

.avatars {
  direction: rtl;  /* This is to get the stack with left on top */
  text-align: left;  /* Now need to explitly align left */
  padding-left: 25px;  /* Same value as the negative margin */
}