Telegram Group Join Now
Create an Image Gallery Using HTML and CSS Grid
In This Article, We Create An Image Gallery Html Css. We Use Only Html Css For This Gallery And We Style This Gallery Using A Rounded Grid Gallery So This Is A Very Interesting Project. So Let’s Start With Html Code Then We Write Css For Styling Our Gallery.
Html Code For Image 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>
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.
50+ HTML, CSS & JavaScript Projects With Source Code
Html Output
Css Code For Image Gallery
.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;
}
ADVERTISEMENT
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 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.
Portfolio Website using HTML and CSS (Source Code)
Final Output
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.
Restaurant Website Using HTML and CSS
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
