title: CSS3 Target Div Overlay Webkit Transition
body: <p>Is it possible to add an opacity transition to CSS3 div overlay target?</p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/pb7St/" rel="nofollow">http://jsfiddle.net/pb7St/</a></p>
  
  <pre><code>#content {
      background-color: #ccc;
      height: 300px;
      width: 300px;
      z-index:1;
  }
  .overlaystyle {
      height: 100px;
      width: 100px;
      background-color: #000;
      left: 20px;
      top: 20px;
      position: absolute;
      z-index:2;
      opacity: 0;
      -webkit-transition: opacity 1s ease;
  }
  #overlay {
      display:none;
  }
  #overlay:target {
      display:block;
      opacity: 1;
  }
  </code></pre>
  
  <p>Is there any other (better) way to close / hide the div? Currently I'm using:</p>
  
  <pre><code>href="#_"
  </code></pre>