Responsive Image Gallery with Zoom Hover

Responsive image gallery using HTML and CSS In this article, we are going to build a responsive image gallery using HTML and CSS. The gallery will be responsive in two different ways. It will be responsive in width and in height. If you have a proper idea about the project, watch the video tutorial below. There are videos related to front-end development uploaded on our YouTube channel. If you would like to learn more about front-end web design, you can subscribe to our YouTube Channel.

If you've watched the video, you'll have a better idea of the project. Responsive image gallery using HTML and CSS In this article, we are going to build a responsive image gallery using HTML and CSS. The gallery will be responsive in two different ways. It will be responsive in width and in height. The Responsive Image Gallery is designed to display images in full-screen mode. It can be used for multiple purposes like the gallery of your company’s products or the gallery of your latest work. This responsive image gallery uses HTML and CSS. We are going to use the HTML element and the CSS properties display and background size.

The Responsive Image Gallery is a great way to showcase your best work in a creative and stylish way. It is perfect for showcasing your latest designs, projects, and products. It has many useful features like the ability to add captions, the option to show an image gallery in full-screen mode, and the option to change the size of the thumbnails. The Responsive Image Gallery is a beautiful and simple way to showcase your best work in a creative and stylish way. You can use it for multiple purposes like the gallery of your company’s products or the gallery of your latest work.

To build this responsive image gallery, we will need some basic HTML and CSS knowledge. We will start by creating a new HTML file and then we will add some basic CSS properties. We have taken a div called 'wrapper' and inside it, we have taken another div called 'img-area'. Six images of the same size have been taken inside the 'img-area' div. The project's default margin and padding were eliminated in the CSS part. The zoom hover effect and CSS transition were used to make the hover effect smooth. Finally, we used CSS media queries to change some values of CSS for the smaller screen. In this way, the project will look responsive on smaller devices.

You May Also Like:

Responsive Image Gallery with Zoom Hover [ Source Code ]:

The first thing you need to do is create two files, one for HTML and another for CSS. It's a good idea to add external CSS to your files. You can paste the code from the below box into your project. The code can be downloaded from the button below if you're facing any difficulties with it.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Responsive Image gallery HTML CSS</title>
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <div class="wrapper">
        <div class="img-area">
          <img src='1.jpg' alt=''>
          <img src='2.jpg' alt=''>
          <img src='3.jpg' alt=''>
          <img src='4.jpg' alt=''>
          <img src='5.jpg' alt=''>
          <img src='6.jpg' alt=''>          
        </div>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: beige;
}
.wrapper {
	width: 589px;
	height: auto;
	margin: 10% auto;
}
.img-area {
	display: grid;
	grid-template-rows: repeat(3, 19vh);
	grid-template-columns: repeat(2, 19vw);
	transition: all .2s cubic-bezier(0.5, 0.8, 0.5, 0.2);
	border-radius: 10px;
}
img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	left: 0;
	top: 0;
	transition: all .15s cubic-bezier(0.5, 0.2, 0.2, 0.5);
	position: relative;
	box-shadow: 0 0 0 #000;
	opacity: .7;
}
img:hover {
	width: 120%;
	height: 300%;
	opacity: 1;
	z-index: 1;
	box-shadow: 1em 1em 1em #0004;
	transition: all .3s cubic-bezier(0.5, 0.2, 0.2, 0.5);
	border-radius: 5px;
	top: -100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.wrapper {
		width: 80%;
		height: auto;
		margin: 5%;
	}
	.img-area {
		grid-template-rows: repeat(3, 20vh);
		grid-template-columns: repeat(2, 32vh);
	}
	img:hover {
		width: 100%;
		height: 200%;
	}
}
@media only screen and (max-width: 767px) {
	.wrapper {
		width: 80%;
		height: auto;
		margin: 10%;
	}
	.img-area {
		grid-template-rows: repeat(5, 30vh);
		grid-template-columns: repeat(1, 50vh);
	}
	img:hover {
		width: 100%;
		height: 200%;
	}
}

I hope you have done a good job implementing the code. We publish completely free source codes on this website so you can visit us more often. Please share the articles on this website so that they can reach people who are similar to you. We would like to thank you for visiting our website.

DOWNLOAD CODE

Responsive Image Gallery with Zoom Hover [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Image Gallery with Zoom Hover

Responsive Image Gallery with Zoom Hover [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form