CSS Image Gallery
The term image gallery refers to the collection of pictures/images that are stored and displayed at a particular place within the web page. The CSS image gallery allows us to create a responsive grid of images by applying some CSS properties. To create a responsive image gallery using CSS, the steps are given below:
Creating a basic structure
As we know, we can create multiple divisions in a row but not more than 12. In this, we are going to show how to create an image gallery along with its description using HTML.
In the given code we have added the <img> element within the parent <div> element to add the image on a web page. Then we have added another <div> element just after the <img> element to add the description of the image.
<div>
<img src="image_path" alt="name">
<!--- for description--->
<div>Add description here.</div>
</div>
Styling the image gallery using CSS
Now we are going to specify the CSS properties to provide the proper alignment, to make the image gallery responsive, and to provide styling. The CSS properties which we specified for the image gallery are given below:
<style>
div.grid {
margin: 8px;
border: 2px solid #ccc;
float: left;
width: 180px;
}
div.grid img {
width: 100%;
height: auto;
}
div.content {
padding: 15px;
text-align: center;
}
</style>
Example: Creating Image gallery using CSS
Here is the proper practical implementation of the image gallery given that we have discussed above.
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<style>
div.grid {
margin: 8px;
border: 2px solid #ccc;
float: left;
width: 180px;
}
div.grid img {
width: 100%;
}
div.content {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<img src="img1.png" alt="image1" height="160">
<div class="content">You can add description here.</div>
</div>
<div class="grid">
<img src="img2.jpg" alt="image2" height="160">
<div class="content">You can add description here.</div>
</div>
<div class="grid">
<img src="img3.png" alt="image3" height="160">
<div class="content">You can add description here.</div>
</div>
<div class="grid">
<img src="img4.jpg" alt="image4" height="160">
<div class="content">You can add description here.</div>
</div>
</body>
</html>
Output:
The output of the given code is given below:
Responsive Image Gallery in CSS
In the previous lesson, we have created an image gallery using CSS. In this lesson, we are going to create a responsive image gallery.
As we know the responsiveness of the website plays a huge role in user interaction. To make this image gallery responsive, we have to add media queries. The media query automatically adjusts the layout of the images at different screen sizes.
Live Example: Creating responsive image gallery using CSS
In this example, we have specified the CSS media queries which allow the layout to adjust itself according to the screen size.
Conclusion
In this lesson, we have learned how to create an image gallery using CSS. We can also make them responsive using CSS Media Queries.
