🔥 ข่าวด่วน: web//https://www.geeksforgeeks.org/css image gallery

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= 
"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:
image gallery

My Personal Notes

Aug	SEP	Oct
	25
2019	2020	2021

CSS | Image Gallery

Recommended Posts: