How to create Image gallery with hover effect

Posted on February 22, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

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.

In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our responsive Image gallery using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.


You might like this :

Radio button validation Sortable list using JavaScript
Responsive Contact us form using Bootstrap Animated NavBar using JavaScript HTML budget calculator





Step by step guide of creating a responsive Image gallery:

So this time I have something interesting you can put this where your clients or visitors will land or landing page of your portfolio and it will create an image gallery with CSS animation (This is optimized for desktop as well as for mobile). The first step is to add the broiler plate of HTML, you can add this from below.

Step 1

=> Add the Broiler plate of HTML 
              

<!DOCTYPE html>

<html>

<head>

<title>responsive Image gallery - Code With Bishal</title>

</head>

<!-- created by Code With Bishal - www.codewithbishal.com
-->

<body>

</body>

</html>

After adding the broiler plate of HTML add the below code to create multiple DIV's.

<div class="wrapper1">
<div class="gallery">
</div>
</div>

Now, add another 
DIV
container and 
span
to put images

<div class="image">
<span>
</span>
</div>

Now, let's add the CSS or style to our HTML file and this will do the styling of our gallery. So our second step is to add the CSS file, you can copy the code from below

Step 2)

=> Add CSS (External or Internal)

If you are using External CSS then create a file

                
                    style.css

And add code :

                
<link rel="stylesheet" href="style.css">

If you want to use Internal CSS than add

                <style>   </style>

tag Between

                <head>   </head>
then add the CSS code between style tag or inside 
style.css


* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}



.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
justify-content: center;
}

We will make our gallery responsive using display:grid;
We have successfully made our gallery responsive. Now insert the below code.

.gallery img {
width: 100%;
}
.gallery img:hover {
  opacity: 0.7;
}

OR copy the code from below


Step 1) Add your HTML Code -

HTML Code

<!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>
Copy Contents

Step 2) Add your CSS Code -

CSS Code
              
<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>
Copy Contents

Download Source Code


Image Credits : https://unsplash.com/photos/VowIFDxogG4
Image Credits : https://unsplash.com/photos/TFyi0QOx08c
Image Credits : https://unsplash.com/photos/6-C0VRsagUw
Image Credits : https://unsplash.com/photos/ndN00KmbJ1c
Image Credits : https://unsplash.com/photos/-f0YLss50Bs
Image Credits : https://unsplash.com/photos/y2azHvupCVo


Leave a Comment:

Search
Categories