Hello, Coders. In this article, we will make a Photo Gallery In HTML and CSS Code. This Photo Gallery will contain a number of images that would appear similar to a standard gallery. We will create a stunning responsive photo gallery website.
All of the images in this Photo Gallery will be displayed in a small size, and when you click on any of them, the full size of that image will be displayed, and you can zoom in and out of the picture using the mouse wheel.
This project will teach you how to add multiple images to a webpage as well as how to make the page responsive.
I hope you must have got an idea about the project.
Let's have a look at our project Photo Gallery.
Html Photo Gallery Code
Before the code, you just need to add the following link in your HTML file for the fonts:
Keep note that you must add this link under the head tag .
Step1: Lets Start with adding some Basic HTML Code for photo gallery:-
The HTML is hypertext markup language is the main structure of our webpage which will help us to display our content to the browser.
All the HTML document must start with <!doctypehtml> this helps the browser to understand the code written follows the lastest HTML format.
The HTML document itself begin With and end with .
The content that will be displayed in the brower comes under the body section
.Inside the body tag main content lies.Here I will add the structure of the HTML code from scratch.
Our HTML contains the following part :
The main content of our HTML code is present in the div tag which contain our image.
The img tag with class(m-p-g_thumbs-img).
We have another div tag, which helps to see the image in full size.
Go through the below code and paste in your IDE :
Html Photo Gallery Code:-
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Photos Material Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="m-p-g">
<div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
<img src="http://unsplash.it/600/400?image=940" data-full="http://unsplash.it/1200/800?image=940" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/640/450?image=906" data-full="http://unsplash.it/1280/900?image=906" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/550/420?image=885" data-full="http://unsplash.it/1100/840?image=885" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/650/450?image=823" data-full="http://unsplash.it/1300/900?image=823" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/600/350?image=815" data-full="http://unsplash.it/1200/700?image=815" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/560/500?image=677" data-full="http://unsplash.it/1120/1000?image=677" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/670/410?image=401" data-full="http://unsplash.it/1340/820?image=401" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/620/340?image=623" data-full="http://unsplash.it/1240/680?image=623" class="m-p-g__thumbs-img" />
<img src="http://unsplash.it/790/390?image=339" data-full="http://unsplash.it/1580/780?image=339" class="m-p-g__thumbs-img" />
</div>
<div class="m-p-g__fullscreen"></div>
</div>
<script>
var elem = document.querySelector('.m-p-g');
document.addEventListener('DOMContentLoaded', function() {
var gallery = new MaterialPhotoGallery(elem);
});
</script>
<!-- partial -->
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/material-photo-gallery.min.js'></script>
</body>
</html>
Html Photo Gallery Code
Before the code, you just need to add the CSS link to our HTML file so that we add styling to our website:
<link rel="stylesheet" href="./style.css">
Keep note that you must add this link under the head tag .
Step2: Adding the CSS Code For Photo Gallery
By CSS we will design our main container and will provide maximum width and then we will style each and every image and will give some transition to our images and also we provided the hover effect to our images.
The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.
/*------------------------------------*\
MATERIAL PHOTO GALLERY
\*------------------------------------*/
.m-p-g {
max-width: 100%;
margin: 0 auto;
}
.m-p-g__thumbs-img {
margin: 0;
float: left;
vertical-align: bottom;
cursor: pointer;
z-index: 1;
position: relative;
opacity: 0;
filter: brightness(100%);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
will-change: opacity, transform;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.m-p-g__thumbs-img.active {
z-index: 50;
}
.m-p-g__thumbs-img.layout-completed {
opacity: 1;
}
.m-p-g__thumbs-img.hide {
opacity: 0;
}
.m-p-g__thumbs-img:hover {
filter: brightness(110%);
}
.m-p-g__fullscreen {
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0);
visibility: hidden;
transition: background 0.25s ease-out, visibility 0.01s 0.5s linear;
will-change: background, visibility;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.m-p-g__fullscreen.active {
transition: background 0.25s ease-out, visibility 0.01s 0s linear;
visibility: visible;
background: rgba(0, 0, 0, 0.95);
}
.m-p-g__fullscreen-img {
pointer-events: none;
position: absolute;
transform-origin: left top;
top: 50%;
left: 50%;
max-height: 100vh;
max-width: 100%;
visibility: hidden;
will-change: visibility;
transition: opacity 0.5s ease-out;
}
.m-p-g__fullscreen-img.active {
visibility: visible;
opacity: 1 !important;
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease-out;
}
.m-p-g__fullscreen-img.almost-active {
opacity: 0;
transform: translate3d(0, 0, 0) !important;
}
.m-p-g__controls {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 200;
height: 20vh;
background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.m-p-g__controls.active {
opacity: 1;
visibility: visible;
}
.m-p-g__controls-close, .m-p-g__controls-arrow {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
}
.m-p-g__controls-close:focus, .m-p-g__controls-arrow:focus {
outline: none;
}
.m-p-g__controls-arrow {
position: absolute;
z-index: 1;
top: 0;
width: 20%;
height: 100vh;
display: flex;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0;
}
.m-p-g__controls-arrow:hover {
opacity: 1;
}
.m-p-g__controls-arrow--prev {
left: 0;
padding-left: 3vw;
justify-content: flex-start;
}
.m-p-g__controls-arrow--next {
right: 0;
padding-right: 3vw;
justify-content: flex-end;
}
.m-p-g__controls-close {
position: absolute;
top: 3vh;
left: 3vw;
z-index: 5;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.m-p-g__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
transition: all 0.25s ease-out;
}
.m-p-g__btn:hover {
background: rgba(255, 255, 255, 0.15);
}
.m-p-g__alertBox {
position: fixed;
z-index: 999;
max-width: 700px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 25px;
border-radius: 3px;
text-align: center;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
color: grey;
}
.m-p-g__alertBox h2 {
color: red;
}
/* DEMO */
body {
background: #fefefe;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
font-family: 'Roboto Mono';
}
h2 {
font-weight: 300;
margin: 4vh 4vw;
letter-spacing: 3px;
color: grey;
text-transform: uppercase;
}
.demo-btn {
display: inline-block;
margin: 0 2.5px 4vh 2.5px;
text-decoration: none;
color: grey;
padding: 15px;
line-height: 1;
min-width: 140px;
background: rgba(0, 0, 0, 0.07);
border-radius: 6px;
}
.demo-btn:hover {
background: rgba(0, 0, 0, 0.12);
}
@media (max-width: 640px) {
.demo-btn {
min-width: 0;
font-size: 14px;
}
}
Step3: Adding the Javascript Code For Photo Gallery
We just used script tag in our HTML file to add our javascript .In javascript part , We just initialised a variable which selects our element with its class name and then we just added an eventlistener domcontentloaded as the content loads up we callback a function where we creates a variable .
Now, as you can see in the output, we have created an Photo Gallery using HTML, CSS, and JavaScript which will help you to create some small website projects.
Now I’m looking for your reviews.
So, How was the blog , Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.
CodeWithRandom
I hope I was able to make you understand this project and that you learned something new from this blog. If you had any problems, please leave a comment with your problems, and if you liked it, please show your appreciation in the comment section. This inspires bloggers to create new blogs.
Written by : Arun
Code by : Ettrics
Top comments (1)
Thanks for the insightful tutorial on creating a photo gallery in HTML! For those looking to further improve their gallery with high-quality images, I recommend exploring these studio photography tips . They offer modern techniques to enhance photo quality, which can significantly impact the visual appeal of your web projects. Blending good development skills with great photography can really make your website stand out!