
Posted on February 22, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com
Responsive Image gallery:
This tutorial will show you how you can create a responsive image gallery with a CSS hover effect. The image gallery is made with a CSS grid and is fully responsive, this allows viewers to view this in any electronic device's screen such as mobile, Desktop, Laptop etc.
What is a Responsive Image gallery?
=> Our awesome, responsive Image gallery gives visitors an attractive and responsive Image gallery with CSS hover effect. You can also add these to your website or to your portfolio and can create a great impression in front of your visitors.
How can I use this responsive Image gallery using HTML and CSS?
=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the responsive Image gallery.
Do I need to know how to code?
=> No, you don't need to know how to code you can simply copy the HTML and CSS code from here and paste it wherever you want your responsive Image gallery. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.
Is it safe to use the responsive image gallery in HTML?
=> Yes, it's completely safe to use the responsive Image gallery.
What are the advantages of the responsive image gallery?
=> Responsive image gallery is a very good way for creating an image gallery.
How can I download the source code of the responsive Image gallery?
=> Scroll the page to the bottom there you will find our download button to download the code.
Overview of the Blog :
=> In this blog, you can learn, how to make a responsive Image gallery using HTML and CSS By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The responsive image gallery is a lightweight and easy-to-use HTML and CSS code that creates a responsive image gallery for you.
<!DOCTYPE html>
<html>
<head>
<title>responsive Image gallery - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
<div class="wrapper1">
<div class="gallery">
</div>
</div>
DIV
container and span
to put images<div class="image">
<span>
</span>
</div>
style.css
<link rel="stylesheet" href="style.css">
<style> </style>
<head> </head>
style.css
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
justify-content: center;
}
.gallery img {
width: 100%;
}
.gallery img:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<title>Responsive gallery- Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="wrapper">
<div class="gallery">
<div class="image">
<span><img
src="https://images.unsplash.com/photo-1470770903676-69b98201ea1c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt="Image 1"
/></span>
</div>
<div class="image">
<span><img
src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80"
alt="Image 2"
/></span>
</div>
<div class="image">
<span><img
src="https://images.unsplash.com/reserve/HgZuGu3gSD6db21T3lxm_San%20Zenone.jpg?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80"
alt="Image 3"
/></span>
</div>
<div class="image">
<span><img
src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt="Image 4"
/></span>
</div>
<div class="image">
<span><img
src="https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80"
alt="Image 5"
/></span>
</div>
<div class="image">
<span><img
src="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt="Image 6"
/></span>
</div>
</div>
</div>
</body>
</html>
<style>
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
justify-content: center;
}
.gallery img {
width: 100%;
}
.gallery img:hover {
opacity: 0.7;
}
</style>