How to Create css images gallery grid with example?

CSS Image Gallery we can create using CSS and make also a responsive image gallery with the help of Bootstrap or Media Query used in CSS.

Write Description of CSS Images Gallery

Create Image Gallery with CSS

<html>
<head>
<style>
.imagegallery {
  width: 280px;
  margin: 5px;
  float: left;
  border: 1px solid #ccc;
}

.imagegallery:hover {
  border: 1px solid #777;
}

.imagegallery img {
  width: 100%;
  height: auto;
}

.description {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="imagegallery">
  <a target="_blank" href="banner.jpg">
    <img src="image/banner.jpg" alt="Gallary_image" width="300" height="200">
  </a>
  <div class="description">Write about Image Feature Here</div>
</div>

<div class="imagegallery">
  <a target="_blank" href="banner.jpg">
    <img src="image/banner.jpg" alt="Gallary_image" width="300" height="200">
  </a>
  <div class="description">Write about Image Feature Here</div>
</div>

<div class="imagegallery">
  <a target="_blank" href="banner.jpg">
    <img src="image/banner.jpg" alt="Gallary_image" width="300" height="200">
  </a>
  <div class="description">Write about Image Feature Here</div>
</div>

<div class="imagegallery">
  <a target="_blank" href="banner.jpg">
    <img src="image/banner.jpg" alt="Gallary_image" width="300" height="200">
  </a>
  <div class="description">Write about Image Feature Here</div>
</div>

</body>
</html>

<html>

<head>

<style>

.imagegallery {

width: 280px;

margin: 5px;

float: left;

border: 1px solid #ccc;

}

.imagegallery:hover {

border: 1px solid #777;

}

.imagegallery img {

width: 100%;

height: auto;

}

.description {

padding: 15px;

text-align: center;

}

</style>

</head>

<body>

</a>

<div class="description">Write about Image Feature Here</div>

</div>

</a>

<div class="description">Write about Image Feature Here</div>

</div>

</a>

<div class="description">Write about Image Feature Here</div>

</div>

</a>

<div class="description">Write about Image Feature Here</div>

</div>

</body>

</html>

Here you can change width size, height size, padding, border, according to your need, and image path is given according to your path where stored gallery images.
Description section you can write about the gallery section details or according to your need you can change the description details.

Create Tab Gallery:-

If you want to implement tab gallery for gallery images you can create in every way, in tab gallery when clicking
on images opened images in tab form, you can see every image in tab form.
let’s see tab gallery

Step 1) Add HTML Document:

add HTML Document in between open body tag and closing body tag

<div class="row">
  <div class="columnbox">
    <img src="image/banne1r.jpg" alt="banner1" onclick="myFunction(this);">
  </div>
  <div class="columnbox">
    <img src="image/banner2.jpg" alt="banner2" onclick="myFunction(this);">
  </div>
  <div class="columnbox">
    <img src="image/banner3.jpg" alt="banner3" onclick="myFunction(this);">
  </div>
  <div class="columnbox">
    <img src="image/banner4.jpg" alt="banner4" onclick="myFunction(this);">
  </div>
</div>

<!-- The expand img container -->
<div class="container">
  <!-- Closed the img -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

  <!-- Expand img -->
  <img id="expandedImg" style="width:100%">

  <!-- Image text -->
  <div id="imagecontent"></div>
</div>

</div>

</div>

</div>

</div>

</div>

Step 2) Add CSS Document:

add CSS document as an external sheet or internal sheet.

.columnboxbox {
  float: left;
  width: 25%;
  padding: 10px;
}
.columnbox img {
  opacity: 0.8; 
  cursor: pointer; 
}
.columnbox img:hover {
  opacity: 1;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.container {
  position: relative;
  display: none;
}
#imagecontent {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.columnboxbox {

float: left;

width: 25%;

padding: 10px;

}

.columnbox img {

opacity: 0.8;

cursor: pointer;

}

.columnbox img:hover {

opacity: 1;

}

.row:after {

content: "";

display: table;

clear: both;

}

.container {

position: relative;

display: none;

}

#imagecontent {

position: absolute;

bottom: 15px;

left: 15px;

color: white;

font-size: 20px;

}

.closebtn {

position: absolute;

top: 10px;

right: 15px;

color: white;

font-size: 35px;

cursor: pointer;

}

Add Javascript Document

Javascript document function file you will call with the .js file extension

 function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imagecontent = document.getElementById("imagecontent");
  expandImg.src = imgs.src;
    imagecontent.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

function myFunction(imgs) {

var expandImg = document.getElementById("expandedImg");

var imagecontent = document.getElementById("imagecontent");

expandImg.src = imgs.src;

imagecontent.innerHTML = imgs.alt;

expandImg.parentElement.style.display = "block";

}

How to Create css images gallery grid with example?

Create Image Gallery with CSS

Create Tab Gallery:-

Step 1) Add HTML Document:

Step 2) Add CSS Document:

Add Javascript Document

Related Posts

About Author

admin