Amazing Image LightBox in HTML, CSS & JavaScript | Project Series Day - 13 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made an Image LightBox with the help of HTML, CSS & JavaScript | It is Project Series Day 13. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple image lightbox step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<div class="modal-box invisible">
<div class="overlay"></div>
<div class="modal-box--image">
<img src="" alt="image here" />
</div>
</div>
<div class="wrapper">
<div class="parent-box">
<div class="image-box">
<img src="https://images.unsplash.com/photo-1482517967863-00e15c9b44be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
</div>
<div class="image-box">
<img src=https://images.unsplash.com/photo-1513297887119-d46091b24bfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
</div>
<div class="image-box">
<img src="https://images.unsplash.com/photo-1512867616096-c91ed9daf1eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1195&q=80" alt="" />
</div>
<div class="image-box">
<img src="https://images.unsplash.com/photo-1491864483946-1f06be97b71d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80" alt="" />
</div>
<div class="image-box">
<img src="https://images.unsplash.com/photo-1505139229755-18651479b8be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
</div>
<div class="image-box">
<img src="https://images.unsplash.com/photo-1479722842840-c0a823bd0cd6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=800" alt="" />
</div>
</div>
</div>CSS🎈( step - 2)
* {
box-sizing: border-box;
}
.wrapper {
width: 960px;
max-width: 95%;
margin: 0 auto;
padding: 10px 0;
background: white;
}
.parent-box {
display: flex;
flex-wrap: wrap;
}
.image-box {
width: 25%;
height: 227px;
min-width: 250px;
padding: 8px;
box-shadow: 0 0 3px #bdbdbd;
overflow: hidden;
margin-right: 15px;
margin-bottom: 15px;
cursor: zoom-in;
transition: all 0.2s ease-in;
border-radius: 4px;
}
.image-box img {
width: 100%;
height: 100%;
}
.image-box:hover {
box-shadow: 0 5px 18px -3px #bdbdbd;
}
.modal-box {
position: fixed;
height: 100%;
width: 100%;
background: rgba(3, 3, 3, 0.9);
transition: all 0.33s ease-out;
}
.modal-box .overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
cursor: zoom-out;
z-index: 1;
}
.modal-box--image {
background: white;
position: absolute;
width: 700px;
height: 500px;
max-height: 90%;
max-width: 90%;
padding: 20px;
border-radius: 5px;
z-index: 3;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.modal-box--image img {
width: 92%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-box.invisible {
opacity: 0;
transform: translateY(-120%);
}Java Script🎈( step - 3)
var modalBox = document.querySelector('.modal-box'), modalBoxImg = modalBox.querySelector('.modal-box--image'), overlay = document.querySelector('.overlay'), imageBox = document.querySelectorAll('.image-box'), modalImgBox = modalBoxImg.querySelector('img'); for (let i = 0; i < imageBox.length; i++) { imageBox[i].onclick = function () { modalBox.classList.remove('invisible'); var imgSrc = this.querySelector('img').src; modalImgBox.src = imgSrc; } } overlay.onclick = function () { modalBox.classList.add('invisible'); } windwo.onkeydown = function (e) { if (e.keyCode === 27){ modalBox.classList.add('invisible'); } }
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.