Open In App

CSS Image Gallery

Improve
Improve
Like Article
Like
Save
Share
Report

Image Gallery is used to store and display a collection of pictures. This example creates a responsive Image Gallery using HTML and CSS.

Steps 1:

Creating a basic gallery structure

  • Each gallery contains a number of div sections.
  • Each div section contains an image and its description.
<div class="gallery">
<div class="box">
<div class="image"> Image Added Here </div>
<div class="text"> Text Added Here </div>
</div>

Steps 2:

Styling the file using CSS

  • Styling the gallery container:
    • Set the display property to flex. It means elements within the gallery container will have flex context.
    • Set the flex-flow property to row wrap. It sets the flex-direction and flex-wrap style.
    .gallery {
    width:100%;
    display:flex;
    flex-flow: row wrap;
    }
  • Styling the box:
    .box {
    flex-basis: 20%;
    width: 100%;
    padding: 10px;
    margin: 8px;

    // Set the blur shadow
    box-shadow: 1px 1px 15px 1px green;
    }

Steps 3:

Use @media query to create responsive image gallery.

@media only screen and (max-width: 300px) { 
.box {
flex-basis: 100%;
}

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        /* style to set body of page */
        body {
            width: 100%;
            margin: auto;
        }
 
        .gallery {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }
 
        .box {
            flex-basis: 20%;
            width: 100%;
            padding: 10px;
            margin: 8px;
            box-shadow: 1px 1px 1px 1px green;
        }
 
        .text {
            text-align: center;
            margin-top: 5px;
        }
 
        .image:hover {
            border: 3px solid green;
        }
 
        /* media query used here */
        @media only screen and (max-width: 300px) {
            .box {
                flex-basis: 100%;
            }
        }
 
        @media only screen and (max-width:500px) {
            .box {
                flex-basis: 40%;
            }
        }
    </style>
</head>
 
<body>
    <div class="gallery">
        <div class="box">
            <div class="image">
                <a target="_blank" href=
                    <img src=
                         width="300"
                         height="300">
                </a>
            </div>
 
            <div class="text">
                Geeks Classes Image
            </div>
        </div>
 
        <div class="box">
            <div class="image">
                <a target="_blank" href=
                    <img src=
                         width="300"
                         height="300">
                </a>
            </div>
 
            <div class="text">
                GeekforGeeks Image
            </div>
        </div>
 
        <div class="box">
            <div class="image">
                <a target="_blank"
                   href=
                    <img src=
                         width="300"
                         height="300">
                </a>
            </div>
 
            <div class="text">
                Geeks Image
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

image gallery



Last Updated : 05 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads