Today I’m going to show you how to create a Pure CSS Image Lightbox. We’re going to use the :target selector for our Lightbox popup. So all we need to do, is create a list of images, that are wrapped in anchor tags, that link to #img1, #img2 etc etc… and then we need to create an other list, with same images that are hidden by default.
[tutorial_details]
Basically the first list is our gallery and when we click on an image, the same image from the other list will pop up over the page, but in a bigger size and in the middle of the screen. And if you click on the image again, or off the image it’ll disappear.
Creating the Image Lightbox
The Image Gallery
For the gallery all we have to do, is list our images, using the < img > tag and wrap it around with an < a href=”#img1″ >
<!-- thumbnail image wrapped in a link -->
<section id="gallery">
<!-- thumbnail image wrapped in a link -->
<section class="item">
<a href="#img1">
<img src="img/img1.jpg">
</a>
</section>
<section class="item">
<a href="#img2">
<img src="img/img2.jpg">
</a>
</section>
<section class="item">
<a href="#img3">
<img src="img/img3.jpg">
</a>
</section>
</section>The Lightbox
The lightbox’s html is pretty much the same as the gallery. The important thing here, is that the image’s ID has to match with the link from the gallery. For example for the first image, the link is #img1 then the ID for this image in the lightbox needs to be img1
<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img1">
<div class="box">
<a class="close" href="#">X</a>
Lorem ipsum dolor sit amet
<div class="content">
<img src="img/img1.jpg">
</div>
</div>
</div>
<div class="lightbox" id="img2">
<div class="box">
<a class="close" href="#">X</a>
Lorem ipsum dolor sit amet
<div class="content">
<img src="img/img2.jpg">
</div>
</div>
</div>
<div class="lightbox" id="img3">
<div class="box">
<a class="close" href="#">X</a>
Lorem ipsum dolor sit amet
<div class="content">
<img src="img/img3.jpg">
</div>
</div>
</div>The CSS
And finally we apply the CSS. The Lightbox is hidden by default. The image from them only appear when the images are clicked in the gallery. You can also notice that the URL changes to #img1, #img2 etc when the images are clicked and the lightbox popped up.
<!-- * Basic lightbox styles. Notice the * default 'display' is 'none'. -->
#gallery a {
text-decoration:none;
}
#gallery .item {
width: 200px; height: 200px; overflow: hidden;
float: left;
border: 5px solid #333;
margin: 5px;
}
#gallery .item a {
overflow: hidden;
}
#gallery .item a img {
height: 100%;
align-self: center;
}
.lightbox {
/** Hide the lightbox */
opacity: 0;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: -100%;
left: 0;
color:#333333;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.lightbox:target {
/** Show lightbox when it is target */
opacity: 1;
outline: none;
top: 0;
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width:500px;
margin: 2% auto;
padding:10px 20px 10px 20px;
background-color:#FFF;
box-shadow: 0px 1px 26px -3px #777777;
}
.lightbox .title {
margin:0;
padding:0 0 10px 0px;
border-bottom:1px #ccc solid;
font-size:22px;
}
.lightbox .content {
display:block;
position:relative;
}
.lightbox .close {
display:block;
float:right;
text-decoration:none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
color:#858585;
}
.clear {
display:block;
clear:both;
}And at this point you should be done, and your image lightbox should work.
Adding Next and Previous Button and Caption
To be able to add next, previous and close button, we need to restructure the html code for the lightbox. Like so:
<!-- before -->
<div class="lightbox" id="img1">
<div class="box">
<a class="close" href="#">X</a>
Lorem ipsum dolor sit amet
<div class="content">
<img src="img/img1.jpg">
</div>
</div>
</div>
<!-- after -->
<div class="lightbox" id="img1">
<div class="box">
<a class="close" href="#">X</a>
Lorem ipsum dolor sit amet
<div class="content">
<img src="img/img1.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Text Modal Window Nullam at volutpat ipsum. Nullam nec posuere ante. Nulla molestie ac odio sed malesuada.Text Modal Window With a Video Ut dapibus odio eget vestibulum condimentum.
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img3">Previous</a>
<!-- Next Image Button -->
<a class="next" href="#img2">Next</a>
<div class="clear"></div>
</div>
</div>As you can see, all we did is we added two anchor tags ( a tags ) after the #content dive and we also added a paragraph tag ( p tag ) with the class of .desc. The anchors are for next and previous buttons, both have the classes ( .next and .prev ). And to change the image description, simply change the text in the paragraph with class of “Desc”.
The image description will only show up if u hover over the image itself. By default it’s also hidden.
After you’ve updated the lightbox codes, don’t forget to add your images. Also, we need to add the code below the code above in your stylesheet.
.lightbox .content .desc {
z-index:99;
bottom:0;
position:absolute;
padding:10px;
margin:0 0 4px 0;
background:rgba(0,0,0,0.8);
color:#fff;
font-size:17px;
opacity:0;
transition: opacity ease-in-out 0.5s;
}
.lightbox .content:hover .desc {
opacity:1;
}
.lightbox .next,
.lightbox .prev,
.lightbox .close {
display:block;
text-decoration:none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
color:#858585;
}
.prev {
float:left;
}
.next,
.close {
float:right;
}
.clear {
display:block;
clear:both;
}I hope this helps 🙂 If you have an question, please feel free to leave a comment down below. Also if you know a better way of doing this, or just an other way, let us know in the comments down below. And please consider sharing this with your fellow designers!