Image Gallery Html Css | Rounded Grid Images Gallery Code

Table of Contents

Image Gallery Html Css | Rounded Grid Images Galler Code

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

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

Html Output

Image Gallery Html code

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

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.

quiz app javascript quiz

Final Output

Image Gallery Css code

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

Share on:

Leave a Comment