CSS | Image Gallery - GeeksforGeeks

18 Jan, 2019
Image Gallery is used to store and display collection of pictures. This example create a responsive Image Gallery using HTML and CSS.
Steps 1: Creating a basic gallery structure
Each gallery contains number of div section.
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;
}

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

.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:
<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png">                    <img src ="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png"                 width = "300" height = "300">                </a>            </div>                          <div class = "text">                Geeks Classes Image            </div>        </div>              <div class = "box">            <div class = "image">                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png">                    <img src ="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png"                width = "300" height = "300">                </a>            </div>                          <div class = "text">                GeekforGeeks Image            </div>        </div>                  <div class = "box">            <div class = "image">                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png">                    <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"                 width = "300" height = "300">                </a>            </div>                          <div class = "text">                Geeks Image            </div>        </div></body>  </html>                                    
Output:
CSS-Basics
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript