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

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;
    }
}