index.html

<div class="gallery">
  <span style="--i:1">
    <img src="https://images4.alphacoders.com/678/thumb-1920-678317.jpg" alt="" />
  </span>
  <span style="--i:2">
    <img src="https://images5.alphacoders.com/653/653698.jpg" alt="" />
  </span>
  <span style="--i:3">
    <img src="https://images6.alphacoders.com/803/thumb-1920-803643.png" alt="" />
  </span>
  <span style="--i:4">
    <img src="https://images.alphacoders.com/785/thumb-1920-785833.png" alt="" />
  </span>
  <span style="--i:5">
    <img src="https://images6.alphacoders.com/749/thumb-1920-749966.png" alt="" />
  </span>
  <span style="--i:6">
    <img src="https://images4.alphacoders.com/761/thumb-1920-761076.png" alt="" />
  </span>
  <span style="--i:7">
    <img src="https://images.alphacoders.com/682/thumb-1920-682570.png" alt="" />
  </span>
  <span style="--i:8">
    <img src="https://images4.alphacoders.com/866/thumb-1920-866812.png" alt="" />
  </span>
</div>