How to Create: Horizontal Scrolling Image Gallery

Learn how to use CSS to create an image gallery with horizontal scrolling.

Image Gallery with Horizontal Scrolling

Use the horizontal scrollbar to view other images:

Wuhan Beijing Shenzhen Hangzhou Shanghai

Try It Yourself

Create an Image Gallery with Horizontal Scrolling

Step 1 - Add HTML:

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Forest">
  <img src="img_lights.jpg" alt="Northern Lights">
  <img src="img_mountains.jpg" alt="Mountains">
</div>

Step 2 - Add CSS:

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
div.scroll-container img {
  padding: 10px;
}

Try It Yourself

Related Pages

Tutorial:HTML Image

Tutorial:CSS Set Image Style