title: fade in lightbox with css transitions
body: <p>I'm trying to make this lightbox fade in and out, would ideally like to do it with CSS if possible. Any suggestions?</p>
  
  <p><a href="http://jsfiddle.net/UhV3M/" rel="nofollow">Live example</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="about"&gt;
      &lt;div class="wrapper"&gt;
          &lt;button id="hide" class="close"&gt;close&lt;/button&gt;
              &lt;h1&gt;About&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;a id="show" href="#about" class="scroll"&gt;About&lt;/a&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// Simple show and hide button
  $("#hide").click(function(){
      $("#about").hide();
  });
  $("#show").click(function(){
      $("#about").show();
  });
  </code></pre>