How to create an image gallery with a horizontal scrollbar using CSS ?
Last Updated :
10 Jan, 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=
alt="Img1">
<img src=
alt="Img2">
<img src=
alt="Img3">
<img src=
alt="Img4">
<img src=
alt="Img5">
<img src=
alt="Img6">
<img src=
alt="Img7">
<img src=
alt="Img8">
<img src=
alt="Img9">
<img src=
alt="Img10">
</div>
</div>
</body>
</html>
|
CSS
@import
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=
alt="Img1">
<img src=
alt="Img2">
<img src=
alt="Img3">
<img src=
alt="Img4">
<img src=
alt="Img5">
<img src=
alt="Img6">
<img src=
alt="Img7">
<img src=
alt="Img8">
<img src=
alt="Img9">
<img src=
alt="Img10">
</div>
</div>
</body>
</html>
|
CSS
@import url(
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:
Share your thoughts in the comments
Please Login to comment...