How to create an image gallery with a horizontal scrollbar using CSS ?

How to Create an Image Gallery with a Horizontal Scrollbar using CSS?

Last Updated : 30 Jul, 2024

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 create an image gallery with a horizontal scrollbar using CSS.

Preview

compressed_Screenshot-_464_ — Preview

Approach

First, create a basic HTML layout for your image gallery and modal pop-ups. Each image in the gallery should have a corresponding modal with a unique ID.
Then add image elements inside the gallery div with "src", "alt", and "onclick()" attributes to trigger the modal.
Then use CSS to style your webpage, including elements like image containers, galleries, modals, and layout components.
For responsive model images, use the media queries in CSS. This ensures that your images adapt well to different screen sizes and devices.
Implement JavaScript functions to handle the opening and closing of modal windows when images are clicked. When a user clicks on an image, fetch the respective modal ID and set its display property to "block". Similarly, clicking the close button should set the display property of the modal to "none".

Example: The example shows 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>Responsive Modal Images</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="main-heading">
      Image gallery with a horizontal scrollbar using CSS</h1>
    <div class="gallery">
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg" 
             alt="HTML"
             class="gallery-image" 
             onclick="openModal('modal1', 1)">
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg" 
             alt="JavaScript"
             class="gallery-image" 
             onclick="openModal('modal2', 2)">
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg" 
             alt="Web" 
             class="gallery-image"
             onclick="openModal('modal3', 3)">
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg" 
             alt="Web 2" 
             class="gallery-image" 
             onclick="openModal('modal4', 4)">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
             alt="Cyber security" 
             class="gallery-image" 
             onclick="openModal('modal5', 5)">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp" 
             alt="Devops"
             class="gallery-image"
             onclick="openModal('modal6', 6)">
    </div>

    <div id="modal1" class="modal">
        <span class="close" 
              onclick="closeModal('modal1')">&times;</span>
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg" 
             alt="HTML"
             class="modal-content">
        <div class="message"></div>
    </div>

    <div id="modal2" class="modal">
        <span class="close"
              onclick="closeModal('modal2')">&times;</span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg" 
             alt="JavaScript" class="modal-content">
        <div class="message"></div>
    </div>

    <div id="modal3" class="modal">
        <span class="close"
              onclick="closeModal('modal3')">&times;</span>
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg"
             alt="Web" 
             class="modal-content">
        <div class="message"></div>
    </div>

    <div id="modal4" class="modal">
        <span class="close" 
              onclick="closeModal('modal4')">&times;</span>
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg" 
             alt="Web 2" class="modal-content">
        <div class="message"></div>
    </div>
    <div id="modal5" class="modal">
        <span class="close" 
              onclick="closeModal('modal5')">&times;</span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
             alt="Cyber security"
             class="modal-content">
        <div class="message"></div>
    </div>
    <div id="modal6" class="modal">
        <span class="close"
              onclick="closeModal('modal6')">&times;</span>
        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp" 
             alt="Devops" class="modal-content">
        <div class="message"></div>
    </div>

    <script>
        function openModal(modalId, index) {
            let modal = document.getElementById(modalId);
            modal.style.display = "flex";
            modal.classList.add("show");
            let message = modal.querySelector(".message");
            message.innerText = `You clicked on the ${index} image.`;
        }

        function closeModal(modalId) {
            let modal = document.getElementById(modalId);
            modal.classList.remove("show");
            setTimeout(function () {
                modal.style.display = "none";
                modal.querySelector(".message").innerText = "";
            }, 300);
        }
    </script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #12dea4;
}

.main-heading {
    color: #2051e6;
    text-align: center;
    margin: 20px 0;
}

.gallery {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    margin: 0 20px;
    scrollbar-width: thin;
    scrollbar-color: #2051e6 #12dea4;
}

.gallery-image {
    display: inline-block;
    width: auto;
    height: 150px;
    margin-right: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-image:last-child {
    margin-right: 0;
}

.gallery-image:hover {
    transform: scale(1.1);
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 500px;
    max-height: 80%;
    border-radius: 5px;
    overflow: hidden;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal.show {
    display: flex;
    opacity: 1;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.close:hover {
    transform: rotate(45deg);
}

.message {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(13, 219, 6, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
    .gallery-image {
        height: 100px;
    }
}

@media screen and (max-width: 480px) {
    .gallery-image {
        height: 80px;
    }
}

Output:

How to create an image gallery with a horizontal scrollbar using CSS ?

S

skaftafh

Improve

Article Tags :

Similar Reads

How to create an image gallery with a horizontal scrollbar using CSS ?

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

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

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

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

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

How to create a Portfolio Gallery using HTML and CSS ?

The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. To create a portfolio gallery we will need only HTML and CSS. We can use JavaScript a