Hello Coder! Welcome to the Codewithrandom blog. In this article, we create an Image Gallery Using HTML and CSS. This gallery is styled using a rounded grid gallery and is created using only HTML and CSS, making it a very interesting project.
So let's begin with the HTML code before writing the CSS to style our gallery.
Collections of images are kept and shown in the Image Gallery. A fantastic method to showcase excellent images on your website is through an image gallery. When you want to show a gallery of pictures on an article or website, you use it.
Html Code For Gallery:-
<!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">
<title>Image Gallery Html Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gallery">
<img src="https://picsum.photos/id/1029/500/500" alt="a big park inside a modern city">
<img src="https://picsum.photos/id/1047/500/500" alt="a small street between building">
<img src="https://picsum.photos/id/1067/500/500" alt="seen from the sky of a big city">
<img src="https://picsum.photos/id/122/500/500" alt="a bridge in the night">
</div>
</body>
</html>
In order to create the container for our image gallery, we will use the div tag with the class gallery. Next, we will add several images inside the div tag using the img> tag, similarly using the image tag to give the content a proper gallery appearance. We will include numerous pictures in our image gallery using the image tag with src.
This is our whole html code we use a class and images with the html image tag. And you can see the output with only code then we style our images with help of css.
CSS Image Gallery Code:-
.gallery {
--s: 200px; /* control the size */
--g: 8px; /* control the gap */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
filter: grayscale();
z-index: 0;
transition: 0.25s, z-index 0s 0.25s;
}
.gallery > img:hover {
width: calc(200% + var(--g));
filter: grayscale(0);
z-index: 1;
--_c: 50%;
transition: 0.4s, z-index 0s;
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #a8dba8;
}
Step1: Using the class selector (.gallery), we will add styling to the gallery container in the first step. We will also change the display to "grid" and add some space around the image using the gap property.
.gallery {
--s: 200px; /* control the size */
--g: 8px; /* control the gap */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
Step2: Now that we have added styling to our picture, we will set the width to "100%," the cursor type to "pointer," add a grayscale filter to it using the filter property and add a transition to it using the transition property.
In a similar manner, we will style each and every picture in our gallery and add the hover property. Any picture that is displayed to the user enlarges and scales up as the user hovers over it.
This is our shortcode and you can see the project screenshot and video of the image gallery. It has an awesome hover effect. We use animation and target using css that when we hover the image what happens. So this is for our project. Hope you like this project if you want more projects visit our home page and you get 100+ project source codes completely free.
So this is a video of our project, you can see how we click on the image and it's round and coming on the whole image div section. So that's it for our Image Gallery html css complete source code.
if you have any confusion Comment below or you can contact us by filling out ur contact us form from the home section.
Code By - t_afif
written by - Codewithrandom
Top comments (0)