Categories
CSS Web development

How to create an Image Gallery with HTML and CSS?

Setting up a CSS image gallery is quite simple. Image Gallery is used to store and display the collection of pictures. Today you can learn how to create an Image Gallery with only CSS, and later tabbed an image gallery with CSS and JavaScript and on the end how to use CSS media queries to create a responsive image gallery that will look good on desktops, tablets, and smartphones. 

CSS Image Gallery

I. The following image gallery is created with CSS:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

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

div.gallery img {
  width: 100%;
  height: auto;
}

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

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" alt="cyclist" width="600" height="400">
  </a>
  <div class="desc">Cyclist</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="600" height="400">
  </a>
  <div class="desc">Cake</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" width="600" height="400">
  </a>
  <div class="desc">Coffee</div>
</div>

</body>
</html>

Output:



II. Create a tabbed gallery:

Step 1: Add HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" alt="cyclist" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" alt="web developer" style="width:100%" onclick="myFunction(this);">
  </div>
</div>
</body>
</html>

Step 2: Add CSS

Create four columns and style the images.  

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  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;
}

Step 3: Add JavaScript

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>

Output (Click on the image to expand it) :

cyclist
cake
coffee
web developer
×

III. Responsive Image Gallery

Step1: Add HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg">
      <img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="600" height="400">
    </a>
    <div class="desc">Cake</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg">
      <img src="https://lenadesign.org/wp-content/uploads/2020/07/coffeeanimation.jpg" alt="coffee" width="600" height="400">
    </a>
    <div class="desc">Coffee</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg">
    <img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" alt="web developer" width="600" height="400">
    </a>
    <div class="desc">Web developer</div>
  </div>
</div>

<div class="clearfix"></div>
</body>
</html>

Step2: Add CSS:

div.gallery {
  border: 1px solid #ccc;
}

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

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Output:

Enjoy coding!