CSS Image Gallery -

CSS Image Gallery

CSS image gallery is a collection of images that is displayed using CSS. CSS can be used to control the layout of the images, their size, spacing, and other visual properties.CSS image galleries are commonly used on websites to display products, portfolios, or other visual content in a visually appealing way.

In the below PDF we discuss about Image Gallery in detail in simple language, Hope this will help in better understanding.

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>

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>