Skip to content
Related Articles

Related Articles

CSS | Image Gallery
  • Last Updated : 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;
    }
    
  • 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:




<!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>
</body>
  
</html>                                    

Output:
image gallery

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :