How to create an image gallery with a horizontal scrollbar using CSS ?
Last Updated :
23 Jul, 2024
In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently utilizes the horizontal space for displaying a larger number of images.
Using White-space and Overflow-x
The `white-space` is used to control text wrapping and spacing within an element, while `overflow-x` manages horizontal content overflow, enabling options like hiding, scrollbar display, or container expansion.
Approach
- Create the basic structure of the web page with heading element, <div>, and <img>. Link the external stylesheet that defines styles for the body, headings, the main gallery container, and individual images.
- Use the Google Fonts and import the 'Poppins' font for the text. All the images have style with fixed width, height, and margins having rounded corners and a border.
- The gallery container element has the class name "
gallerybox" has the property white-space with nowrap to prevent text wrapping and set the property overflow-x to auto for providing a horizontal scrollbar when needed. - The property margin-right specifies the margin between the images.
Example: The example illustrates how to create an image gallery with a horizontal scrollbar using CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Image gallery with a horizontal
scrollbar using CSS
</title>
<link rel="stylesheet"
href="index.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Image gallery with a horizontal
scrollbar White-space and Overflow-x
CSS properties.
</h3>
<div class="gallerybox">
<div class="imgbox">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"
alt="Img1">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210713211702/System-Design-Tutorial.png"
alt="Img2">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104145854/1.gif"
alt="Img3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104145726/1.webp"
alt="Img4">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"
alt="Img5">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150015/1.png"
alt="Img6">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150015/1.png"
alt="Img7">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150426/1.webp"
alt="Img8">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"
alt="Img9">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240104150505/1.png"
alt="Img10">
</div>
</div>
</body>
</html>
@import
url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
h1 {
color: rgb(41, 107, 41);
text-align: center;
}
h3 {
text-align: center;
}
.gallerybox {
white-space: nowrap;
overflow-x: auto;
}
.imgbox img {
width: 400px;
height: 200px;
margin-right: 5px;
border-radius: 20px;
border: 2px solid rgb(138, 138, 128);
}
Output
Using Flexbox properties and Overflow-x
Flexbox properties, such as 'display: flex and 'justify-content', helps in arrangement of elements, while `overflow-x` manages horizontal content overflow, offering options like hiding, scrollbar display, or container expansion.
Approach
- Create the basic structure of the web page with heading element, <div>, and <img>. Link the external stylesheet that defines styles for the body, headings, the main gallery container, and individual images.
- Use the Google Fonts and import the 'Poppins' font for the text. All the images have style with fixed width, height, and margins having rounded corners and a border.
- The gallery container element has the class name "
gallerybox" has the property overflow-x to auto for providing a horizontal scrollbar when needed. - The property margin-right specifies the margin between the images. The element having class imgbox have the property
display with flex to prevent text wrapping and flex-wrap with no-wrap to avoid wrapping images on smaller screen sizes.
Example: The example illustrates how to create an image gallery with a horizontal scrollbar using CSS properties.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Image gallery with a horizontal
scrollbar using CSS
</title>
<link rel="stylesheet"
href="index.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Image gallery with a horizontal
scrollbar using CSS with Flexbox properties
</h3>
<div class="gallerybox">
<div class="imgbox">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155817/1.webp"
alt="Img1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155842/1.png"
alt="Img2">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155909/1.gif"
alt="Img3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155934/1.webp"
alt="Img4">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155817/1.webp"
alt="Img5">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155842/1.png"
alt="Img6">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155909/1.gif"
alt="Img7">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155934/1.webp"
alt="Img8">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155934/1.webp"
alt="Img9">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240109155842/1.png"
alt="Img10">
</div>
</div>
</body>
</html>
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
h1 {
color: rgb(41, 107, 41);
text-align: center;
}
h3 {
text-align: center;
}
.gallerybox {
overflow-x: auto;
}
.imgbox img {
width: 400px;
height: 200px;
margin-right: 5px;
border-radius: 20px;
border: 2px solid rgb(138, 138, 128);
}
.imgbox {
display: flex;
flex-wrap: nowrap;
}
Output:
Similar Reads
How to Create an Image Gallery with a Horizontal Scrollbar using CSS? Image galleries are essential tools for showcasing multiple images within a single container on a website. They allow users to view a collection of images in an organized way. When we use the horizontal scrollbar, then we can reduce the space. In this tutorial, we will go through the steps on how to
4 min read
How to Create Scrollable Horizontal Menu using CSS? The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container.Syntaxwhite-space: nowrapoverflow: auto;HTML<!DOCTYPE html> <html> <head> <style> div.scrollmenu { b
1 min read
How to create Horizontal Scroll Snap Using HTML and CSS ? In this project, we are going to create a simple Horizontal Scroll Snap by using HTML and CSS only.Glimpse of Project Approach: The best way to animate the HTML objects is by using CSS classes and by setting the transitions at different stages.HTML code:Create an HTML file (index.html).Link the CSS
2 min read
How to Create a Responsive Image Gallery using CSS? Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a r
3 min read
How to Make a Div Horizontally Scrollable using CSS? Creating a horizontally scrollable <div> is a practical CSS technique used to handle wide content such as image galleries, tables, or long text blocks without breaking the layout. Instead of wrapping or shrinking content, horizontal scrolling allows users to scroll sideways and view hidden ele
3 min read
How to Make a Div Horizontally Scrollable using CSS? Creating a horizontally scrollable <div> is a practical CSS technique used to handle wide content such as image galleries, tables, or long text blocks without breaking the layout. Instead of wrapping or shrinking content, horizontal scrolling allows users to scroll sideways and view hidden ele
3 min read