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.

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) :




×
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!
Read also: