CSS Image Gallery
Last Updated :
12 Apr, 2024
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
Steps 3:
Use @media query to create responsive image gallery.
@media only screen and (max-width: 300px) {
.box {
flex-basis: 100%;
}Example:
html
<!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>
</div>
</body>
</html>
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...