Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted December 6th, 2015
A lightbox made only with HTML & CSS

It’s quite easy to create a lightbox with only HTML and CSS. During the proces you have to create both the gallery and the lightbox in HTML, next the visibility and the design will be made with CSS.

The gallery

The first thing you have to do is create a gallery with the small images which will be always shown on your website. It’s important to create this gallery like this:

<section id=“gallery”>
     <div class=“item”>
          <a href=“#image1”><img src=“images/image1.jpg”/></a>
     </div>
     <div class=“item”>
          <a href=“#image2”><img src=“images/image2.jpg”/></a>
     </div>
</section>

In this gallery are two images. Nothing special here, except for the fact that the links of the images need to have ID’s and that these can’t be the same.

The lightbox

The html for the lightbox has a lot in common with the html for the gallery. For each image in the gallery we make a different lightbox. When making this HTML it’s important to keep in mind that the ID’s need to match the ID’s of the gallery image links.

<div class="lightbox" id="image1">
     <div class="box">
          <a class="close" href="#">x</a>
          <div class="content">
          <img src="images/image1.jpg"/>
          This will be the description of your image
     </div>
</div>
<div class="lightbox" id="image2">
     <div class="box">
          <a class="close" href="#">x</a>
          <div class="content">
          <img src="images/image1.jpg"/>
          This will be the description of your image
     </div>
</div>

If you open this with your browser you will see both the gallery as the lightbox below each other. We will now use CSS to make the lightbox appear on the right spot after clicking on the image in the gallery.

The CSS

You can style your gallery anyway you want to. To create the lightbox there is no special css needed for the gallery.

We first have to make the lightbox hidden by default, because we only want it to appear when we clicked the image.

.lightbox{
     opacity: 0; /*this hides the lightbox*/
     /*with the code below we give the lightbox a basic lightbox styling*/
     position: fixed;
     z-index: 999;
     width: 100%;
     height: 100%;
     top: -100%;
     left: 0;
     color: #333;
     -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
     -0-transition: opacity .5s ease-in-out;
     -transition: opacity .5s ease-in-out;
     }

.lightbox:target{  /*the word target makes sure this code will only be used after clicking on the image in the gallery*/
     opacity: 1;
}

.box{
     width: -webkit-min-content;
     width: -moz-min-content;
     width: min-content;
     min-width: 500px;
     margin: 2% auto;
     padding: 10px 20px;
     background-color: #fff;
     box-shadow: 0 1px 25px -5px #777;
}

.content{
     margin: 0;
     padding-bottom: 10px;
     border-bottom: 1px #ccc solid;
}

.close{
     display: block;
     float: right;
     text-decoration: none;
     color: #000;
}

When you open all this in your browser you’ll see that you now have a working lightbox! As an extra feature I’ll show you how to add previous/next buttons and a caption.

Previous/next buttons and caption

First you have to add the buttons in your lightbox HTML. After adding this your code will look like this:

<div class="lightbox" id="image1">
     <div class="box">
          <a class="close" href="#">x</a>
          <div class="content">
          <img src="images/image1.jpg"/>
          <p class="desc"> This will be the description of your image</p>
     </div>
     <a class="prev" href="images/image0.jpg">Previous</a>
     <a class="next" href="images/image2.jpg">next</a>
</div>

After updating the HTML there are also some additions to the CSS needed:

.content .desc{
     z-index: 99;
     bottom: 0;
     position: absolute;
     padding: 10px;
     margin-bottom: 4px;
     background: reba(0,0,0,0.5);
     color: #fff;
     opacity: 0; /*to make the text hidden by default*/
}

.content:hover .desc{
     opacity: 1;
}

.next, .prev, .close{
     display: block;
     text-decoration: none;
     color: #000;
}

.prev{
     float: left;
}

.next, close {
     float: right;
}

When you open your code in your browser you’ll see you now have a working full HTML and CSS lightbox with previous/next button and a caption text with a hover animation.

Posted by Amanda de Rijk

Leave a Reply

Your email address will not be published. Required fields are marked *