How To Add Pure CSS Lightbox to Specific Images in Blogger

There could be hundreds of reasons why you might be adding lightbox to specific images in your Blogger blog and why I am sharing this tutorial so before elaborating any one of those let's get to work and learn how to add pure CSS lightbox in Blogger.

But let me tell you the simple concept of a lightbox first. A lightbox has a concept of displaying images and videos by filling the screen, and dimming out the rest of the web page. So this is what we we will do in our tutorial using only pure CSS.

For live demo of this tutorial click on the image below and an amazing lightbox version of it will pop up! 

Add pure CSS lightbox to specific images in Blogger:

This tutorial consists of two parts only. Firstly the CSS and then HTML so first we will add CSS in our template and then we will add HTML. Now let's start!

The CSS:

• Go to your Blogger account > Theme > Backup Template.
• Click on Edit HTML
• Search for ]]> </b:skin>
• Now above that tag paste the following CSS code. 

 /* CSS code lightbox topearningboy */
.thumbnail {
  max-width: 40%;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
border: 5px solid #fff;
border-radius:3px;
  }

.lightbox:target {
    outline: none;
    display: block;
}

.w3-animate-zoom {animation:animatezoom 0.6s}

@keyframes animatezoom{
  from{transform:scale(0)} to{transform:scale(1)}
}    

• Change max-width of the thumbnail image if you want to.
• Change background color of lightbox  
• Change #fff for border color
• Since this lightbox uses zoom in animation so if you want fade in animation then use opacity property instead of transform property!
• Save your template!

 

The HTML:

• When you are completely done with your post then switch to the HTML mode of your Blogger editor and paste the following HTML code where you want your lightbox image to appear  

<!-- HTML code Lightbox topearningboy -->
 

<a href="#img1">
  

<img src="Image URL" alt="Image alt-text" class="thumbnail">
 

</a>


<a href="#_" class="lightbox" id="img1">
 

  <img class="w3-animate-zoom" src="Image URL" alt="Image alt-text">
 

</a> 

• Replace Image URL with the URL of image you want lightbox for. ( Hint: Upload the image in New Post and switch to HTML mode of the post. Look for src="" and everything between inverted commas is your Image URL )
• Replace  Image alt-text with alt text of image that you want.
• Publish your post! 

• Related: Add Responsive Image Gallery in Blogger

Note: When you add the above HTML in the HTML mode of your Blogger editor then Blogger will prompt you with following error, just click on dismiss for that!

Note: Don't switch to the Compose Mode after adding HTML code otherwise Blogger will ruin the code!

Feedback:

I think this might be a simple cool tutorial for Blogger or blogspot users. Don't forget to ask your questions in the comment section below. You can also add this pure css lightbox to your sidebar or in Blogger posts just like we did above!  

If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations!