Image Gallery Using HTML and CSS Grid

Create Image Gallery Using HTML and CSS (Source Code)

Image Gallery Using HTML and CSS

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.

50+ HTML, CSS and JavaScript Projects With Source Code

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

 

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.

Create Portfolio Website Using HTML and CSS (Source Code)

Html Code Output:-

 Image Gallery Using HTML and 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.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

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.

 Image Gallery Using HTML and CSS

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.

Create Resume/CV Website Using HTML and CSS (Source Code)

Final Output Of Image Gallery Html Css:-

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

 

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.

Live Preview Of Image Gallery:

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

What is the purpose of image gallery?

The purpose of creating image galleries is to allow users to save all of their photos in one location and view or remove any of them with a single click.

Which is the most important element to create image gallery?

The <img> tag, which is used to create picture galleries, is the most crucial piece of HTML code needed.



Leave a Reply