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= <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:
Please Login to comment...