How To Create A Horizontal Scrolling Images only in CSS

Adding useful and interesting elements on your website can help keep visitors engaged with the content and allows you to convey information in unique ways. Creating these elements yourself is a smart way to improve your skills and to enhance your next client projects.

On this blog, I've already shared a tutorial how to create a news ticker with Joomla. Based on a similar logic, I wanted to display some websites we've created so far with a scrolling effect. The laziest solution would have been to add an extension with the desired effect to display these images.

But after having thought, I've decided to create my own feature that scrolls through thoses websites. And because it might be useful, I'll share my code with you.

In this article, I'll explain how to create a horizontal scrolling images in pure CSS. No jQuery, no JavaScript needed. And I will also explain you some technical decisions I made.

The HTML Markup

First, we create a container <div> with as many divs as items to display.

To allow our horizontal scroll to loop smoothly, the secret is to duplicate the divs. See how I am using classes from item-1 to item-5 then making an exact copy of those divs.

<div class="horizontal-scroll">
	<div class="horizontal-scroll-item item-1"></div>
	<div class="horizontal-scroll-item item-2"></div>
	<div class="horizontal-scroll-item item-3"></div>
	<div class="horizontal-scroll-item item-4"></div>
	<div class="horizontal-scroll-item item-5"></div>
	<div class="horizontal-scroll-item item-1"></div>
	<div class="horizontal-scroll-item item-2"></div>
	<div class="horizontal-scroll-item item-3"></div>
	<div class="horizontal-scroll-item item-4"></div>
	<div class="horizontal-scroll-item item-5"></div>		
</div>

The CSS styling

We use a flex display on the first <div> so the child items will display and line up in a single row.

.horizontal-scrolling-items {
  display: flex;
  height: 288px; 
  gap: 100px;

I set the height (288px) accordingly to my images and the gap between each item.
More info about CSS gap Property here.

Now, let's add the animation:

.horizontal-scroll-item {
	height: 100%;
	width: 464px;
	background-size: cover;
	animation-duration: 30s;	
	animation-name: HorizontalScroll;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes infiniteScroll {
	from {transform: translateX(0) }
	to {transform: translateX(calc(0px - 50% - 50px));}
}

The final negative value in the translateX of the keyframes is set to half the value of the gap declared in the scrolling items container (gap: 100px;). This will ensure a smoothly loop animation.

We have also set height, width, and background-size as we'll use background-image on the scrolling items.

No need extra explanations to set the duration of the animation.

And finally, we add our images in the CSS:

.item-1 {
  background-image: url("path/to/the/image-1.jpg");
}

.item-2 {
  background-image: url("path/to/the/image-2.jpg");
}

.item-3 {
  background-image: url("path/to/the/image-3.jpg");
}

.item-4 {
  background-image: url("path/to/the/image-4.jpg");
}

.item-5 {
  background-image: url("path/to/the/image-5.jpg");
}

If you wonder why I've decided to go for background-image here, it's because the loop will display the same images over and over and we don’t want the client side to have to download multiple copies of the same file over and over. So, background-image is definitely the smartest move in this configuration.

See the demo

Et voilà

In few minutes, you've learnt how to create an horizontal scroll images only with CSS. It was really simple, fun, educative, and quick.
Feel free to use it, to adapt it, and to share it.