Activating links

Only need to be associated by the href fragment identifier.

<ul id="links">
  <li><a href="#pop1">Pop-up One</a></li>
  <li><a href="#pop2">Pop-up Two</a></li>
  <li><a href="#pop3">Pop-up Three</a></li>
</ul>
  

The pop-up block

Every fragment identifier must have an associated block id.

<div id="pop2" class="pop-up">
  <div class="popBox">
    <div class="popScroll">
      <h2>Pop-up Two</h2>
      <p>Blah, blah, blah. Yada, yada, yada.</p>
    </div>
    <a href="" class="close"><span>Close</span></span></a>
  </div>
  <a href="#links" class="lightbox">Back to links</a>
</div>
  

Outside block

Takes over the whole display once activated via :target.

.pop-up {position:absolute; top:0; left:-500em}
.pop-up:target {position:static; left:0;}
  

First child block

Sets the pop-ups look, its size, position, and activation effect.

.popBox {
  background:#ffffff;

  /* alternatively fixed width / height and negative margins from 50% */
  position:absolute; left:30%; right:30%; top:30%; bottom:30%;

  z-index:1;
  /* padding:1%; removed 17/07/2012 */
  border:1px solid #3a3a3a;

  /* CSS3 rounded corners, drop-shadow and opacity fade in */
  -moz-border-radius:12px;
  border-radius:12px;
  -webkit-box-shadow:2px 2px 4px #3a3a3a;
  -moz-box-shadow:2px 2px 4px #3a3a3a;
  box-shadow:2px 2px 4px #3a3a3a;
  opacity:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:target .popBox {position:fixed; opacity:1;}

.popBox:hover {box-shadow:3px 3px 6px #5a5a5a;}
  

The lightbox

Is actually a link itself. On clicking it returns to the activating link set. How accessible.

.lightbox {display:none; text-indent:-200em; background:#000; opacity:0.4; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0;}
:target .lightbox {display:block}
  

Close pop-up graphic

Is not a graphic but more CSS.

.close {
  position:absolute; top:-0.75em; right:-0.75em; display:block; width:1em; height:1em;
  font:bold large/1 arial, sans-serif; text-align:center; text-decoration:none;
  background:#000; border:3px solid #fff; color:#fff;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  -moz-box-shadow: 0 0 1px 1px #3a3a3a;
  -webkit-box-shadow: 0 0 1px 1px #3a3a3a;
  box-shadow: 0 0 1px 1px #3a3a3a;
}
.close:before {content:"X"}
.close:hover {box-shadow:0 0 1px 1px #c00; background:#c00;}
.close span {text-indent:-200em; display:block;}
  

Pop-up content block

May be bigger than the space defined, therefore allow it to scroll.

/* .popScroll {max-height:99%; overflow-y:scroll;} removed 17/07/2012 */
.popScroll {position:absolute; top:9%; left:3%; right:3%; bottom:9%; overflow-y:auto; *overflow-y:scroll; padding-right:0.5em}
  

What not 100% original? Demo was built from the ground-up over a day. With inspiration, methods, and outright theft from:

• Using CSS3 Transitions, Transforms and Animation
• Create a lightbox with CSS3
• CSS3 Transforms, Transitions, and Animations in Action
• CSS3 transitions and 2D transforms
• A Primer on CSS3 Transforms
• http://blog.insicdesigns.com/2010/02/the-beauty-of-css3-animation/
• Cross-Browser Animated CSS Transforms Even in IE.
• CSS3 Lightbox
• Semantic CSS3 Lightboxes
• CSS3 Fancy Box
• The :target pseudo-class
• Lightbox