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=
<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>
</div>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
05 Jul, 2023
Like Article
Save Article