CSS - Image Gallery

Quiz

CSS Image gallery is used to organize and display images in responsive and visually appealing format. CSS properties can be used to control the layout of images, size, shape, spacing, spanning and lot of other visual effects. In this tutorial we will learn all of those.

CSS image galleries are commonly used on websites to display products, portfolios, or other visual content in a visually appealing way.

Example of CSS Image Gallery

Following is a simple example of image gallery of tutorialspoint courses.

Create a Image Gallery In CSS
Example of CSS Image Gallery
Design Simple Image Gallery
Image Gallery With Hover Effect
Horizontal Scroll Image Gallery

Vertical Scroll Image Gallery
CSS Grid Layout Image Gallery
Responsive Image Gallery
CSS Tabbed Image Gallery
CSS Image Gallery Slideshow

How To Create a Image Gallery In CSS?

To create a simple image gallery, you can follow these steps:

Set Up the HTML Structure: Create a container (e.g., a <div>) to hold all your images. And use <img> tag to render images one by one.
Prepare Images: Ensure all images have consistent dimension. If images are of different dimension, fix a common height (or in some case width) for all images in layout so that width can be adjusted according to height.
Style the Layout: Use CSS grid layout system to define layout of container. You can then define number of columns needed for gallery or spanning of large images using various properties of grid layout system.
Make It Responsive: Use CSS media queries to adjust the number of columns or the size of the images based on the screen size.
Add Hover Effects: Use CSS :hover pseudo-class add effects like scaling, border changes, or shadow effects when user hovers mouse over images.

Design Simple CSS Image Gallery

To display a simple image gallery we can use flexbox layout system. Flexbox is one dimensional layout system, that can be used to display images or any html elements either horizontally or vertically. Even though we have flex wrap property to multiple rows as shown in example, we does not have complete control of two dimensional display as there in grid layout.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .image-gallery {
            display: flex;
            gap: 20px;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: center;
        }
        .image-gallery img {
            width: auto;
            height: 70px;
            border: 3px solid #555;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
    </div>   
</body>

</html>

Image Gallery With Hover Effect

We can use pseudo-class :hover to style mouse over image state. Effect like increased size, border color change will make image gallery looks interactive to user.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .image-gallery {
            display: flex;
            gap: 20px;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: center;
        }
        .image-gallery img {
            width: auto;
            height: 70px;
            border: 3px solid #555;
            border-radius: 10px;
        }
        img:hover{
            transform: scale(1.1);
            border: 3px solid #555;
        }
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
    </div>   
</body>

</html>

CSS Image Gallery With Horizontal Scroll

The example shows how to create an image gallery with a horizontal scrollable layout using the overflow property

Example

<!DOCTYPE html>
<html>

<head>
    <style>
    
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
    </div>   
</body>

</html>

CSS Image Gallery With Vertical Scroll

The following example shows how to create an image gallery with a vertical scrollable layout using the overflow property.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
    
    </style>
</head>

<body>
    <div class="image-gallery">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="css">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="html">
    </div>   
</body>

</html>

CSS Grid Layout Image Gallery

CSS grid layout is most commonly used layout system for designing image gallery, with this we can align images in 2 dimensional manner. Let us see an example for this.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Gallery container */
        .gallery {
            display: grid;
            gap: 10px;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        /* style image items */
        .gallery img {
            width: 100%;
            height: 100px; /* Set a same height for all images */
            object-fit: fit;
            display: block;
            border-radius: 8px;
            border: 3px solid #ccc;
            transition: all 0.3s ease;
        }

        /* Spanning the first image across two rows */
        .gallery img:first-child {
            grid-row: span 2;
            height: 210px; /* Double the height of regular images */
        }

        /* Spanning the sixth image across two columns */
        .gallery img:nth-child(6) {
            grid-column: span 2;
        }

        /* Hover effect */
        .gallery img:hover {
            transform: scale(1.02);
            border-color: #555 ; 
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="/https/www.tutorialspoint.com/w3css/images/w3css_pdfcover.jpg" alt="Gallery Image 1">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="Gallery Image 2">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="Gallery Image 3">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="Gallery Image 4">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="Gallery Image 5">
        <img src="/https/www.tutorialspoint.com/html/images/logo.png" alt="Gallery Image 6">               
    </div>
</body>

</html>

Responsive Image Gallery

We can use CSS media queries to create a responsive image gallery that scales and rearranges its content based on the screen width, providing an optimal viewing experience on different devices and screen sizes. On smaller screens, the images will be wider and more spaced apart.

@media [screen width condition] {
    /* CSS rules to apply if the media query matches */
}

With media queries we can also define style for specific orientation (landscape or portrait) of user device. The default value for this is portrait.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Gallery container */
        .gallery {
            display: grid;
            gap: 10px;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        /* 4 columns in case of large screen */
        @media (min-width: 600px) {
            .gallery {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* 1 column in case of small screen */
        @media (max-width: 599px) {
            .gallery {
                grid-template-columns: 1fr;
            }
        }

        /* Individual image items */
        .gallery img {
            width: 100%;
            height: 100px; /* Set a same height for all images */
            object-fit: fit; /* Ensure images fits the area */
            display: block;
            border-radius: 8px;
            border: 3px solid #ccc; /* Default border color */
            transition: all 0.3s ease;
        }

        /* Spanning the first image across two rows */
        .gallery img:first-child {
            grid-row: span 2;
            height: 210px; /* Double the height of regular images */
        }

        /* Spanning the sixth image across two columns */
        .gallery img:nth-child(6) {
            grid-column: span 2;
        }

        /* Hover effect */
        .gallery img:hover {
            transform: scale(1.02);
            border-color: #555 ; 
        }
    </style>
</head>

<body>
    <div class="gallery">
        <img src="/https/www.tutorialspoint.com/w3css/images/w3css_pdfcover.jpg" alt="Gallery Image 1">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="Gallery Image 2">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="Gallery Image 3">
        <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="Gallery Image 4">
        <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="Gallery Image 5">
        <img src="/https/www.tutorialspoint.com/html/images/logo.png" alt="Gallery Image 6">               
    </div>
</body>

</html>

Output for large screens:

Output for small screens:

CSS Tabbed Image Gallery

A tabbed image gallery means images are arranged in such a way that initially smaller version of images will be displayed and when you click on that small image, a larger version of the same image will open. Let's see how to design it.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .image-gallery {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            height: 200px;
        }
        .image-container { 
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25%;
            height: 200px;
        }
        .image-container img {
            width: auto;
            height: 50px;
            cursor: pointer; 
        }
        .gallery-tab {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }
        .tab-content {
            display: flex;
            justify-content: space-around;
            width: 80%;
            max-height: 80%;
        }
        .tab-content img {
            width: 150px;
            height: auto;
        }
    </style>
</head>

<body>
<h1>Click on the images:</h1>
    <div class="image-gallery">
        <div class="image-container" onclick="opentab('img2')">
            <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="Gallery Image 2" id="img2">
        </div>

        <div class="image-container" onclick="opentab('img3')">
            <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="Gallery Image 3" id="img3">
        </div>

        <div class="image-container" onclick="opentab('img4')">
            <img src="/https/www.tutorialspoint.com/css/images/html.png" alt="Gallery Image 4" id="img4">
        </div>

        <div class="image-container" onclick="opentab('img5')">
            <img src="/https/www.tutorialspoint.com/css/images/css.png" alt="Gallery Image 5" id="img5">
        </div>
    </div>

    <div id="tab" class="gallery-tab" onclick="closetab()">
        <div class="tab-content">
            <img id="tabImg">
        </div>
    </div>

    <script>
        function opentab(imageId) {
            var tab = document.getElementById("tab");
            var tabImg = document.getElementById("tabImg");

            tab.style.display = "flex";
            tabImg.src = document.getElementById(imageId).src;
        }

        function closetab() {
            document.getElementById("tab").style.display = "none";
        }
    </script>
</body>

</html>

CSS Image Gallery Slideshow

By using CSS and JavaScript we can create a simple slideshow gallery. The gallery has several images, and only one image is shown at a time. You can click the left and right arrows to move through the images. To understand code, you have to be well versed with JavaScript.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 60%;
        }
        .slideshow-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .image-gallery {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .image-container {
            width: 100%;
            height: 100%;
        }
        .image-container img {
            width: 100%;
            height: 100%;
        }
        .prev-img, .next-img {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
        }
        .next-img {
            right: 0;
        }
        .prev-img:hover, .next-img:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .bottom-img-container {
            text-align: center;
            margin-top: 20px;
        }
        .bottom-img {
            height: 40px; 
            width: 50px; 
            margin: 0 10px; 
            cursor: pointer;
            opacity: 0.5; 
        }
        .bottom-img.current-bottom-img {
            opacity: 1; 
        }
    </style>
</head>

<body>
    <div class="container">
    <div class="slideshow-container">
        <div class="image-gallery">
            <div class="image-container">
            <img src="/https/www.tutorialspoint.com/css/images/scenery.jpg" >
            </div>
            <div class="image-container">
            <img src="/https/www.tutorialspoint.com/css/images/scenery3.jpg" >
            </div>
            <div class="image-container">
                <img src="/https/www.tutorialspoint.com/css/images/scenery4.jpg">
            </div>         
        </div>

        <a class="prev-img" onclick="slides(-1)"></a>
        <a class="next-img" onclick="slides(1)"></a>
    </div>
    
    <div class="bottom-img-container">
        <img class="bottom-img current-bottom-img" 
             src="/https/www.tutorialspoint.com/css/images/scenery.jpg" onclick="activeSlides(1)">
        <img class="bottom-img" 
             src="/https/www.tutorialspoint.com/css/images/scenery3.jpg" onclick="activeSlides(2)">
        <img class="bottom-img" 
             src="/https/www.tutorialspoint.com/css/images/scenery4.jpg" onclick="activeSlides(3)">
    </div>
</div>

    <script>
        var index = 1;
        displaySlides(index);

        function slides(n) {
            displaySlides(index += n);
        }

        function activeSlides(n) {
            displaySlides(index = n);
        }

        function displaySlides(n) {
            var i;
            var allSlides = document.getElementsByClassName("image-container");
            var allThumbnails = document.getElementsByClassName("bottom-img");

            if (n > allSlides.length) {
                index = 1;
            }
            if (n < 1) {
                index = allSlides.length;
            }
            for (i = 0; i < allSlides.length; i++) {
                allSlides[i].style.display = "none";
            }
            for (i = 0; i < allThumbnails.length; i++) {
                allThumbnails[i].className = 
                        allThumbnails[i].className.replace(" current-bottom-img", "");
                allThumbnails[i].style.filter = "brightness(50%)";
            }
            allSlides[index - 1].style.display = "block";
            allThumbnails[index - 1].className += " current-bottom-img";
            allThumbnails[index - 1].style.filter = "brightness(100%)";
        }
    </script>
</body>

</html>

Print Page

CSS - Image Gallery

Example of CSS Image Gallery

Table of Contents

How To Create a Image Gallery In CSS?

Design Simple CSS Image Gallery

Example

Image Gallery With Hover Effect

Example

CSS Image Gallery With Horizontal Scroll

Example

CSS Image Gallery With Vertical Scroll

Example

CSS Grid Layout Image Gallery

Example

Responsive Image Gallery

Example

CSS Tabbed Image Gallery

Example

CSS Image Gallery Slideshow

Example