Hello developers, today in this blog you will learn to create an Image Gallery with a Model box using HTML, CSS & JavaScript.
The Image Gallery is the place, where the collection of images gets stored. Those stored images can be viewed whenever we want to see them. The box model describes the design and layout. A model box is essentially a box that wraps around every HTML element. It may consist of borders, margins, padding, and the actual content.
In this blog (Image Gallery with Model box) on the webpage, there is a collection of two or more images in a particular section, when you hover the image there is a logo, name of the logo, share icon, and download icon are at the bottom of the image. This is made by CSS position and transition property. When you click the image, the preview of the image is bigger and in shape. Based on the screen size, the images get adjustable. Since this page is made responsive by using CSS media query property.
The source code of this project is given below, if you want the source code of this program, you can copy it. You can use this Image Gallery with the Model box with your creativity and, can take this project to the next level.
Image Gallery with Model box [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html, and, remember, you have to make a file with a .html extension.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Image Gallery with Modelbox || Learningrobo </title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
</head>
<body>
<section>
<div class="lightBox">
<div class="lightBox_content">
<i class="fas fa-times close"></i>
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
<div class="showImg">
<div class="image">
<img src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
</div>
</div>
<div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div>
</div>
</div>
<div class="image-gallery">
<div class="image-container">
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2021/11/21/21/14/mountain-6815304__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2017/02/08/17/24/fantasy-2049567__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683__340.png" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2016/08/09/21/54/lake-1581879__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2015/07/05/10/18/tree-832079__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2018/08/21/23/29/forest-3622519__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2016/11/23/13/48/beach-1852945__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2018/05/30/00/24/thunderstorm-3440450__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2017/01/19/23/46/church-1993645__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2021/11/08/23/29/nature-6780354__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
<div class="image-box">
<img class="gImg" src="https://cdn.pixabay.com/photo/2018/01/22/14/13/animal-3099035__340.jpg" alt="">
<div class="logo_icons">
<a href="#">
<img class="logoImg" src="https://cdn.pixabay.com/photo/2021/09/09/21/04/fairy-lights-6611595__340.jpg" alt="">
<div class="text_content">
<span class="name">Learning Robo</span>
</div>
</a>
<div class="icons">
<i class="fas fa-heart"></i>
<i class="fas fa-arrow-down"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS provides style to an HTML page. To make the page responsive and attractive, create a CSS file with the name style.css, and remember that you've got to make a file with a .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
section{
position: relative;
min-height: 100vh;
width: 100%;
margin: 0 20px;
}
section .lightBox{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.6);
z-index: 100;
display: none;
}
.lightBox .lightBox_content{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 550px;
width: 100%;
background: #F5FCFF;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.lightBox_content .close{
position: absolute;
top: 0;
left: -40px;
font-size: 30px;
color: #fff;
cursor: pointer;
opacity: 0.8;
}
.lightBox_content .close:hover{
opacity: 1;
}
section .logo_icons{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
}
section .logo_icons a{
display: flex;
align-items: center;
text-decoration: none;
}
section .logo_icons .logoImg{
height: 40px;
width: 40px;
border-radius: 50%;
}
section .logo_icons .text_content{
display: flex;
flex-direction: column;
margin-left: 10px;
color: #333;
font-size: 16px;
font-weight: 500;
}
.logo_icons .text_content .followers{
font-size: 13px;
margin-top: -5px;
}
section .logo_icons .icons i{
height: 35px;
width: 35px;
background: #9D50BB;
text-align: center;
line-height: 35px;
font-size: 16px;
color: #fff;
border-radius: 4px;
margin: 0 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.lightBox .logo_icons .icons i:hover{
color: #fff;
background: #7d2ae8;
}
section .lightBox .showImg{
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.lightBox .showImg .image{
max-height: 700px;
max-width: 900px;
}
.showImg .image img{
width: 100%;
height: 100%;
object-fit: contain;
}
section .image-gallery{
max-width: 1300px;
min-height: 100vh;
width: 100%;
background: #F5FCFF;
margin: auto;
}
.image-gallery .image-container{
columns: 3;
margin-top: 20px;
gap: 15px;
}
.image-container img{
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.image-container .image-box{
position: relative;
cursor: pointer;
margin: 10px 0;
}
.image-box .logo_icons{
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
padding: 10px 15px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.image-box:hover .logo_icons{
opacity: 1;
pointer-events: auto;
}
.image-box .logo_icons .icons i{
color: #9D50BB;
background: #fff;
}
.logo_icons .icons i:hover{
color: #000;
}
section .image-gallery .logo_icons .text_content{
color: #fff;
font-size: 14px
}
section .image-gallery .text_content .followers{
font-size: 12px;
font-weight: 400;
margin-top: -4px;
}
.credit{
text-align: center;
color: #000;
font-weight: 900;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: #9D50BB;
font-weight: bold;
}
@media (max-width: 1034px) {
.lightBox_content .close{
top: -40px;
left: 10px;
}
}
@media (max-width: 1002px) {
.image-gallery .image-container{
columns: 2;
}
}
@media (max-width: 602px) {
.image-gallery .image-container{
columns: 1;
}
@media (max-width: 602px) {
.image-gallery header{
font-size: 25px;
}
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.
let body = document.querySelector("body"),
lightBox = document.querySelector(".lightBox"),
img = document.querySelectorAll(".gImg"),
showImg = lightBox.querySelector(".showImg img"),
close = lightBox .querySelector(".close");
for (let image of img) {
image.addEventListener("click", ()=>{
showImg.src = image.src;
lightBox.style.display = "block";
body.style.overflow = "hidden";
close.onclick = ()=>{
lightBox.style.display = "none";
body.style.overflow = "visible";
};
});
}
We hope you would like this Image Gallery with the Model box using HTML, CSS & JavaScript.
Thank you for reading our blog. If you face any problem in creating this Image Gallery with the Model box using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team