CSS Image Gallery
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:
<!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.w3wiki.net/wp-content/uploads/Beginnerforgeek.png">
<img src=
"https://media.w3wiki.net/wp-content/uploads/Beginnerforgeek.png"
width="300"
height="300">
</a>
</div>
<div class="text">
Beginner Classes Image
</div>
</div>
<div class="box">
<div class="image">
<a target="_blank" href=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-22.png">
<img src=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-22.png"
width="300"
height="300">
</a>
</div>
<div class="text">
GeekforBeginner Image
</div>
</div>
<div class="box">
<div class="image">
<a target="_blank"
href=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-10.png">
<img src=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-10.png"
width="300"
height="300">
</a>
</div>
<div class="text">
Beginner Image
</div>
</div>
</div>
</body>
</html>
Output: