You are currently viewing Create Image Gallery Using HTML and CSS Grid

Create Image Gallery Using HTML and CSS Grid

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

Table of Contents

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

 Image Gallery Using HTML and CSS Grid
Image Gallery Using HTML and CSS Grid

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;
}

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

 Image Gallery Using HTML and CSS Grid
Image Gallery Using HTML and CSS Grid

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

Leave a Reply