CodePen Embed - CSS only marquee without HTML duplication, example 0

<div class="marquee marquee--8">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=1" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=2" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=3" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=4" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=5" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=6" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=7" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=8" width="100" height="100" alt="">
</div>
<div class="marquee marquee--3">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=1" width="150" height="150" alt="">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=2" width="150" height="150" alt="">
  <img class="marquee__item" src="https://placehold.co/150x150/purple/gold?font=playfair-display/text=3" width="150" height="150" alt="">
</div>
<div class="marquee marquee--6">
  <img class="marquee__item" src="https://placehold.co/100x100/purple/gold?font=playfair-display/text=1" width="100" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/150x100/purple/gold?font=playfair-display/text=2" width="150" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/125x100/purple/gold?font=playfair-display/text=3" width="125" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/110x100/purple/gold?font=playfair-display/text=4" width="110" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/133x100/purple/gold?font=playfair-display/text=5" width="133" height="100" alt="">
  <img class="marquee__item" src="https://placehold.co/166x100/purple/gold?font=playfair-display/text=6" width="166" height="100" alt="">
</div>

.marquee {
  --marquee-item-height: 100px;
  --marquee-item-offset: 100px;
  
  display: flex;
  block-size: var(--marquee-item-height);
  margin-block: var(--marquee-item-height);
  max-inline-size: var(--marquee-max-width);
  overflow-x: hidden;
  position: relative;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
  position: relative;
}

.marquee__item {
  inset-inline-start: var(--marquee-item-offset);
  position: absolute;
}

.marquee--8 {
  --marquee-item-width: 100px;
  --marquee-item-height: 100px;
}

.marquee--3 {
  --marquee-item-width: 150px;
  --marquee-item-height: 150px;
}

.marquee--6 {
  --marquee-item-width: 166px;
  --marquee-item-height: 100px;
}

This Pen is owned by Smashing Magazine on CodePen. It is a fork of this Pen.

See more by @smashingmag on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.