HTML and CSS Only Lightbox
Wanna show your image gallery with a beautiful lightbox using HTML and CSS only.
That's great because this code is for you.
The code is very simple, short, and easy to understand, and No JavaScript.
Note: for the images, I am using the source of the Unsplash photo.
Watch Video Tutorial
https://youtu.be/qi089bfzCGM
Live Preview.!
HTML Code
<div class="portfolio">
<!-- Item Start -->
<div class="portfolio__item" id="portfolio-1-close" style="--img:url(https://source.unsplash.com/random/900x400?sig=1); --title:'Portfolio-1'; --description: 'Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Nesciunt molestiae natus, accusamus at tempore, eaque doloribus porro unde, cum ad quis! Tenetur quia esse laudantium.' ">
<img class="portfolio__img" src="https://source.unsplash.com/random/900x400?sig=1" />
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-1</h2>
<p class="portfolio__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-1" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-1">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-1-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="portfolio__item" id="portfolio-2-close" style="--img:url(https://source.unsplash.com/random/900x400?sig=2); --title:'Portfolio-2'; --description: 'Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Nesciunt molestiae natus, accusamus at tempore, eaque doloribus porro unde, cum ad quis! Tenetur quia esse laudantium.' ">
<img class="portfolio__img" src="https://source.unsplash.com/random/900x400?sig=2" />
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-2</h2>
<p class="portfolio__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-2" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-2">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-2-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<!-- Item End -->
<div class="portfolio__item" id="portfolio-3-close" style="--img: url(https://source.unsplash.com/random/900x400?sig=3); --title:'Portfolio-3'; --description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet veritatis, illo enim quae maxime ipsum sequi molestiae, odit consectetur consequatur assumenda sit.';">
<img src="https://source.unsplash.com/random/900x400?sig=3" class="portfolio__img" >
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-3</h2>
<p class="portfolio__description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-3" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-3">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-3-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<div class="portfolio__item" id="portfolio-4-close" style="--img: url(https://source.unsplash.com/random/900x400?sig=4); --title:'Portfolio-4'; --description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet veritatis, illo enim quae maxime ipsum sequi molestiae, odit consectetur consequatur assumenda sit.';">
<img src="https://source.unsplash.com/random/900x400?sig=4" class="portfolio__img" >
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-4</h2>
<p class="portfolio__description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-4" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-4">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-4-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<div class="portfolio__item" id="portfolio-5-close" style="--img: url(https://source.unsplash.com/random/900x400?sig=5); --title:'Portfolio-5'; --description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet veritatis, illo enim quae maxime ipsum sequi molestiae, odit consectetur consequatur assumenda sit.';">
<img src="https://source.unsplash.com/random/900x400?sig=5" class="portfolio__img" >
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-5</h2>
<p class="portfolio__description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-5" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-5">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-5-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<div class="portfolio__item" id="portfolio-6-close" style="--img: url(https://source.unsplash.com/random/900x400?sig=6); --title:'Portfolio-6'; --description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet veritatis, illo enim quae maxime ipsum sequi molestiae, odit consectetur consequatur assumenda sit.';">
<img src="https://source.unsplash.com/random/900x400?sig=6" class="portfolio__img" >
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-6</h2>
<p class="portfolio__description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-6" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-6">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-6-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<div class="portfolio__item" id="portfolio-7-close" style="--img: url(https://source.unsplash.com/random/900x400?sig=7); --title:'Portfolio-7'; --description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet veritatis, illo enim quae maxime ipsum sequi molestiae, odit consectetur consequatur assumenda sit.';">
<img src="https://source.unsplash.com/random/900x400?sig=7" class="portfolio__img" >
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-7</h2>
<p class="portfolio__description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-7" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-7">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-7-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<div class="portfolio__item" id="portfolio-8-close" style="--img: url(https://source.unsplash.com/random/900x400?sig=8); --title:'Portfolio-8'; --description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet veritatis, illo enim quae maxime ipsum sequi molestiae, odit consectetur consequatur assumenda sit.';">
<img src="https://source.unsplash.com/random/900x400?sig=8" class="portfolio__img" >
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-8</h2>
<p class="portfolio__description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-8" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-8">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-8-close" class="lightbox__close">×</a>
</div>
</div>
</div>
<div class="portfolio__item" id="portfolio-9-close" style="--img: url(https://source.unsplash.com/random/900x400?sig=9); --title:'Portfolio-9'; --description:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet veritatis, illo enim quae maxime ipsum sequi molestiae, odit consectetur consequatur assumenda sit.';">
<img src="https://source.unsplash.com/random/900x400?sig=9" class="portfolio__img" >
<div class="portfolio__content">
<h2 class="portfolio__title">Portfolio-9</h2>
<p class="portfolio__description">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#portfolio-9" class="portfolio__link">Read More</a>
</div>
<div class="lightbox__item" id="portfolio-9">
<div class="lightbox__content">
<div class="lightbox__img"></div>
<h2 class="lightbox__title"></h2>
<p class="lightbox__description"></p>
<a href="#portfolio-9-close" class="lightbox__close">×</a>
</div>
</div>
</div>
</div>
</div>
CSS Code
/*Import Google Font*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;600&display=swap');
html{
scroll-behavior: smooth;
scroll-padding-top: 50px;
font-family: 'Merriweather Sans', sans-serif;
}
img{
max-width: 100%;
}
.portfolio{
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 30px;
}
.portfolio__item{
padding: 10px;
box-sizing: border-box;
background-color: #f5f5f5;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 5px;
}
.portfolio__img{
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 16 / 9;
}
.portfolio__title{
font-size: 20px;
font-weight: 600;
color: #222;
}
.portfolio__description{
color: #333;
}
.portfolio__link{
font-size: 12px;
font-weight: 600;
color: #fff;
padding: 5px;
margin-bottom: 10px;
display: inline-block;
background-color: #333;
cursor: pointer;
border-radius: 3px;
text-decoration: none;
}
.lightbox__item{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
}
.lightbox__item:target{
display: flex;
}
.lightbox__content{
width: 800px;
height: auto;
position: absolute;
padding: 20px;
background-color: rgba(0,0,0,0.9);
box-shadow: inset 3px 3px 3px rgba(255,255,255,0.4),
inset -3px -3px 3px rgba(255,255,255,0.4);
border-radius: 3px;
}
.lightbox__img{
width: auto;
height: 400px;
display: block;
object-fit: cover;
background: var(--img);
}
.lightbox__title{
font-size: 24px;
color: #fff;
}
.lightbox__title:after{
content: var(--title);
}
.lightbox__description{
color: #eee;
}
.lightbox__description:after{
content: var(--description);
}
.lightbox__close{
width: 25px;
height: 25px;
background-color: red;
color: #fff;
font-weight: 600;
border-radius: 50%;
position: absolute;
right: -5px;
top: -5px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
0 Comments