Hello Friends, Today in this blog you’ll learn how to create a How to create responsive image gallery using html and css?. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a How to create pagination using html css? | Now it’s time to create Responsive image gallery using HTML & CSS.
In the video, you’ve seen the css image gallery. There are many different ways to create this image grid html css one of which is the way we have designed it.
So to create this, Image Gallery you have to create three different files. The 3 files are index.html , style.css & script.js. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.
Let’s create a Js file with the name of script.js and paste the below codes. Remember you’ve to create a file with a .js extension
$(".gallery").magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled: true
}
});
Let’s create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your CSS file. Remember you’ve to create a file with a .css extension
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
background: #4f4d4d;
}
.gallery-section{
width: 100%;
padding: 50px 0;
}
.inner-width{
width: 100%;
max-width: 1300px;
margin: auto;
padding: 20px 20px;
}
.gallery-section h1{
font-size: 4vw;
padding-bottom: 20px;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.gallery-section .gallery a {
padding: 10px;
}
.border{
width: 180px;
height: 4px;
background: #333;
margin: 60px auto;
}
.gallery-section .gallery{
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
}
.gallery-section .image{
flex: 25%;
overflow: hidden;
cursor: pointer;
}
.gallery-section .image img{
width: 100%;
height: 100%;
transition: 0.4s;
border-radius: 25px;
}
.gallery-section .image:hover img{
transform: scale(1.6);
}
@media screen and (max-width:960px) {
.gallery-section .image{
flex: 33.33%;
}
}
@media screen and (max-width:768px) {
.gallery-section .image{
flex: 50%;
}
.gallery-section h1{
font-size: 22px;
}
}
@media screen and (max-width:480px) {
.gallery-section .image{
flex: 100%;
}
}
Now create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension
After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)
That’s all, now you’ve successfully created responsive image gallery html css. If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.
Thanks in Advance!