Introduction of Photo Gallery CSS Grid
Here, today we are presenting you photo gallery css grid our new project that was made with the help of two languages HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). We followed their easy code with simple steps, and we also used the hovering effect to make it more creative. In this project, you will see a photo gallery in which all the photos will be of the same size and their names will be hidden. When the user hovers over a particular image, the name of that image will be visible, with some transition effects you will see in the result.
Now let’s start making this project together with the help of simple HTML and CSS code. We have used here the basic concept of HTML and CSS code. That will not be so advanced that everyone can understand it. This is a very useful project as you can use it anywhere. If you are a web developer, you can use it on your website to store images of any product. If you are a fresher guy, you can make it just for your practice.
HTML (Hypertext Markup Language)
First, we will make the structure of the image gallery with the help of HTML (HHyper Text Markup Language). This is used to make the structure of a web page by writing their code in a text editor. The output will be generated on the Chrome page. In this, we will first give the title of the page, “Image Gallery,” in the title tag. Then proceed forward to the main content of Image Gallery. Which we proceed forward to the main content of Image Gallery. In which we will first make a parent div in the article tag (which is used to represent a complete, or self-contained, composition in a document, page, application, or site, and that is, in principle, independently distributable or reusable). Which all the images will be inserted in the img tag (tthis tag is used to insert images in a web page).
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Photo Gallery</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- partial:index.partial.html --> <article class="gallery"> <img src="https://w0.peakpx.com/wallpaper/496/328/HD-wallpaper-dr-strange-avengers.jpg" alt="guitar player at concert" /> <img src="https://w0.peakpx.com/wallpaper/54/425/HD-wallpaper-avengers-endgame-avengers-endgame-ironman-captain-america-spiderman-black-panther-dr-strange-winter-soldier-hulk-black-widow-warmachine.jpg" alt="duo singing" /> <img src="https://lh3.googleusercontent.com/proxy/TsG7yfRDBk3MwvSdaauj95t4QmV55j4n2GOT-y8H0UHD87tO_-QmLNdL1bakC_FJF0wk-n07uuMRJOl2GB-utIJHYjFy" alt="crowd cheering" /> <img src="https://images.hdqwalls.com/wallpapers/loki-the-god-of-mischief-2023-n8.jpg" alt="singer performing" /> <img src="https://i.pinimg.com/736x/61/3f/59/613f590958871114fb4c29262d3039ca.jpg" alt="singer fistbumping crowd" /> <img src="https://preview.redd.it/jgrho7z3a8e41.jpg?auto=webp&s=87916ac3cc33c4bee9aee2c289008c2e5c397d55" alt="crowd cheering" /> <img src="https://cdn.pixabay.com/photo/2022/06/20/11/34/spiderman-7273540_1280.jpg" alt="guitar player singing" /> <img src="https://e1.pxfuel.com/desktop-wallpaper/245/730/desktop-wallpaper-avengers-endgame-doctor-strange-spider-spider-man-endgame.jpg" alt="guitar player at concert" /> </article> <!-- partial --> </body> </html>
CSS (CCascading Style Sheet)
After creating the structure of the Image Gallery page with the help of HTML. We will give it some styling with the help of CSS (Cascading Style Sheet, this is very useful for designing. Making the look of the website better than before, this is attached to the HTML file in the link tag). In this, we will first make the background black, and then we will move toward the main content of loading.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #030303;
}
.gallery {
display: grid;
grid-template-columns: repeat(6, 105px);
grid-auto-rows: 105px;
&:has(:hover) img:not(:hover),
&:has(:focus) img:not(:focus){
filter: brightness(0.5) contrast(0.5);
}
& img {
object-fit: cover;
width: 200px;
height: 200px;
clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
transition: clip-path 0.25s, filter 0.75s;
z-index: 1;
position: relative;
grid-column: auto / span 2;
border-radius: 5px;
&:nth-child(5n - 1) { grid-column: 2 / span 2 }
&:hover,
&:focus {
clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
z-index: 2;
transition: clip-path 0.25s, filter 0.25s;
}
&:focus {
outline: 1px dashed black;
outline-offset: -5px;
}
}
}In the main content, we will target the parent div and adjust the size. Position of the parent div so that the images inside. The parent div will come in the right position, and then we will also adjust the size and position of images in the image so that images cannot overflow on each other and will also set the border properties of the images. At the end, we will apply the hovering effect to the image tag for each tag. In which we will hide the name of the image, and when the user hovers on one particular image, the name of the image will be visible.
Output of Photo Gallery CSS Grid
Finally, we have made the image gallery with the help of HTML and CSS by following their code step by step. If you still have any doubt, you can contact us through the contact details given in the footer of the page. You can make such projects to increase your knowledge by taking ideas from here. To get the source code, click on the button given below to download the code.
For more explanation, click on the link given below to watch the video.
You can also check:
3 Responses
beatae rerum architecto omnis debitis est ipsum et dicta quis. in maxime eum sit tempora repellendus est aut. qui quae et atque occaecati aut nulla odio. quibusdam distinctio dignissimos eaque itaque est distinctio excepturi ipsa quibusdam ratione id. eius aperiam facere voluptatem suscipit ut quia nam nemo aut in consequatur hic voluptas.
doloribus et eveniet ad quasi culpa cumque iste distinctio. nulla dolore voluptate minus occaecati.
I loved the simplicity of this project. The hover effects and transitions make the photo gallery look professional. This tutorial is great for beginners and experienced developers alike.