Make a beautiful Light-box for images in HTML5, CSS and JavaScript

Most of the users get irritated when the click on a photo to view bigger on a website and land straight on the image URL. Then, to read existing post, they have to click the previous button to come back.

For the solution, of course, should use a Light-box and Today-we're looking into that. Let's start to make a beautiful Light-box in HTML5, CSS and JavaScript!

MARKUP

Assuming that when the user will click on the image, and the light box will open, we just have to set an on-click event to a small image thumbnail. The simple HTML markup is crated below.

<img src='image.png' onclick="document.getElementById('box').style.display='block';
             document.getElementById('bg').style.display='block';
             document.getElementById('pic').src=this.src">

Where, we have a image and for light box and background, below is the markup.

<div id="box" class="box">
    <a href='#' onclick="document.getElementById('box').style.display='none';
                document.getElementById('bg').style.display='none'">X</a>
                <br>
    <img id='pic' src=''>
</div>
<div id="bg" class="bg"></div>

CSS
After this, we will stylize it little using CSS.

.bg {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.box {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 3px;
  border: 8px solid #435;
  background-color:white;
  z-index: 1002;
  overflow: auto;
}
.close{
    font-size: 20px;
    text-decoration: wavy;
    position:static;
}

Done!
As we have already embedded the JavaScript in markup above, when user will click on any image, link or element, the light box will popup.It will show the same image as we have clicked because of document.getElementById('pic').src=this.src.

But the problem you will see is that the image remain at the original size of its URL.So we can fix it by CSS.

#pic{
  width: 500px;
  height:auto;
}

This is a very simple and lightweight light-box for one or two pictures only.Fore more than that, or many, you can't manually set the functions in its on-click attribute.
There we will need some more shortcut.You can start with writing the script for that as CSS-magz will make that as well and post soon.To get updates, do like our Facebook page.