title: Overlapping/overlaying multiple inline images
body: <p>I have a list of images I'm trying to overlap so that they look similar to this:</p>
  <p><a href="https://i.stack.imgur.com/6JZa6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/6JZa6.jpg" alt="overlapped people" /></a></p>
  <p>My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.avatar img {
      border-radius: 50%;
      position: relative;
      left: -5px;
      z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="avatars"&gt;
      &lt;span class="avatar"&gt;
          &lt;img src="https://picsum.photos/70" width="25" height="25"/&gt;
      &lt;/span&gt;
      &lt;span class="avatar"&gt;
          &lt;img src="https://picsum.photos/50" width="25" height="25"/&gt;
      &lt;/span&gt;
      &lt;span class="avatar"&gt;
          &lt;img src="https://picsum.photos/20" width="25" height="25"/&gt;
      &lt;/span&gt;
      &lt;span class="avatar"&gt;
          &lt;img src="https://picsum.photos/100" width="25" height="25"/&gt;
      &lt;/span&gt;
      &lt;!-- Variable amount more avatars --&gt;
  &lt;/div&gt;
  &lt;p&gt;4 People&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But obviously, I need an incrementing <code>left</code> value, and a decrementing <code>z-index</code> for the number of avatar imgs. Sure, I could do this with the <code>@for</code> directive, but the thing is, there's a variable amount of avatar imgs. I was looking at the <code>length()</code> function, but it doesn't work the way I was going to use it.</p>
  <p>Another idea, is to have a set width div, and fit the images inside that, but that comes with its own issues (what if there are 5 images, or 20, how do control the width). I could also combine the images how I want them, elsewhere and not use any CSS.</p>