Handling onClick event with CSS

Hi friends, After a long time i am back! I would like to thank you for your love, comments and support.
Today i want to show you that how we can Handle the onClick mouse event with pure CSS. And how to create pure Css lightbox and Pure Css text-zoomer.

Idea

We are going to use the :target CSS selector to detect the hash(#) from url. And you know we can change the Hash by href="#hash" by onClick.

Code - CSS


#lightbox {
        display:none;
    }

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

 #lightbox:target {
         display:block;
      }


Code - HTML


<div id="lightbox">
          <div>
              <a href="#">Hide me</a><br />
              Hi!! <br />

              i am the lighbox
          </div>
</div>

<a href="#lightbox" >Show the lighbox</a>


Demo

See here is the working example.