Hey friends, today in this blog you’ll learn How To Create Responsive Image Gallery Using Html & Css. I Hope this blog will be helpful.
This Responsive Image Gallery are fully responsive for all devices. On the pc, there are 3 (three) images in a single row but on the mobile devices, there is only 1 (one) image in the single row. If you’re feeling difficulty understanding what I’m saying then you can watch a full video tutorial of this Responsive Image Gallery.
Video Tutorial of Responsive Image Gallery
Responsive Image Gallery [Source Codes]
To create this Responsive Image Gallery. First, you need to create two files, HTML File and CSS File. After creating these files just paste the following source codes into your files. You can also download the source code files of this Responsive image gallery from the given download button.
# HTML CODE
First, create an HTML file with the name of index.html and paste the given codes in your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Image Grid</title>
</head>
<!-- Coding With Nick -->
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<div class="img-hover-zoom">
<img src="img1.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img2.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img3.jpg" style="width:100%" alt="">
</div>
</div>
<div class="column">
<div class="img-hover-zoom">
<img src="img4.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img5.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img6.jpg" style="width:100%" alt="">
</div>
</div>
<div class="column">
<div class="img-hover-zoom">
<img src="img7.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img8.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img9.jpg" style="width:100%" alt="">
</div>
</div>
<div class="column">
<div class="img-hover-zoom">
<img src="img10.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img11.jpg" style="width:100%" alt="">
</div>
<div class="img-hover-zoom">
<img src="img12.jpg" style="width:100%" alt="">
</div>
</div>
</div>
</body>
</html>
# CSS CODE
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.
/* Coding With Nick */
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
*{
box-sizing: border-box;
}
body{
margin: 0;
}
.header{
text-align: center;
padding: 32px;
}
.header h1{
font-family: 'Sacramento';
font-size: 50px;
}
.row{
display: flex;
flex-wrap: wrap;
padding: 0px 100px 100px 100px;
}
.column{
flex: 25%;
max-width: 25%;
}
.img-hover-zoom{
height: auto;
overflow: hidden;
border: 5px solid #ffff;
}
.img-hover-zoom img{
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
transition: transform .5s ease;
}
.img-hover-zoom:hover img{
transform: scale(1.5);
}
@media screen and (max-width: 800px) {
.column{
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 500px) {
.column{
flex: 100%;
max-width: 100%;
}
}
That’s all, now you’ve successfully created a Responsive Image Gallery Using Html & Css . If your code doesn’t work or you’ve faced any error and problem then please download the source code files from the given download button . It’s free and a .zip file will be downloaded then you’ve to extract it.
Download Files From Here
