title: css lightbox remove with click?
body: <p>So, making the Lightbox appear is quite easy. but i want it to be removed if i click elsewhere or on the <strong>TRIGGER</strong> again. is that something that is achievable in css?
  JSFIDDLE: <a href="http://jsfiddle.net/tgs8fp9v/" rel="nofollow">http://jsfiddle.net/tgs8fp9v/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;a href="#x1"&gt;
  TRIGGER
    &lt;/a&gt;
    &lt;a href="#" id="x1"&gt;&lt;/a&gt;
    &lt;div class="Info"&gt;
      message
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>    #x1{
    position: absolute;
    margin-top:calc(25% + 30px);
    margin-left:calc(50% - 280px);
  
  }
  #x1:hover{
  zoom:1.0101;
  }
  #x1:target {
      outline: none;
      display: block;
  }
  #x1:target + .Info {
      display: block;
  }
  .Info{
      display:none;
      height:50px;
      width:100px;
      position:relative;
      background:#fff;
      z-index:99999999;
      margin-top:calc(20% - 50px);
      margin-left:calc(50% - 250px);
      border:2px solid #88d8d8;
  
  }
  </code></pre>