CSS only 'lightbox'

dabblet.css

/**
 * CSS only 'lightbox'
 */

body {
	font: normal 1.5em/1.5 sans-serif;
	background: #0cf;
	color: #444;
	min-height: 100%;
	padding: 2em 10em;
}

.lb-toggle {}



.lb {
	background: rgba(255,255,255,0.9);
	border: 4px solid rgba(0,0,0,0.1);
	padding: 1em;
	text-align: center;
	
	width: 50%; /* Making it easy on myself later (for centering) */

	transition-property: opacity, left;
	transition-duration: 1s, .5s;

	/* Hide at first... */
	outline: 0;
	opacity: 0;
	position: absolute;
	left: -2000px; /* Move out of sight. Could be done differently */
	/* top: -1000px; */ /* NOTE: these values could also have an effect on the show-effect */
}

.lb:target {

	/* Show */
	opacity: 1;
	left: 25%; /* Calc based on width. I made it simple for myself by giving the .lb a % width ;) */
	/* top:auto; */

	/* Lightbox 'masking' */
	outline: 2000px solid rgba(0,0,0,0.4);

}

dabblet.html

<a href="#lb-id">Toggle Lightbox</a>
<div id="lb-id" class="lb">This is the lightbox content <a href="#">Close</a></div>
<p>This is a :target based lightbox that uses a huge `outline` value to mask the lightbox.</p>
<p>Some content for scrolling purposes…</p>
<p>Some content for scrolling purposes…</p>
<p>Some content for scrolling purposes…</p>
<p>Some content for scrolling purposes…</p>
<p>Some content for scrolling purposes…</p>
<p>Some content for scrolling purposes…</p>
<p>Some content for scrolling purposes…</p>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}