Skip to content

Instantly share code, notes, and snippets.

@davidhund
Created October 5, 2012 09:33
Show Gist options
  • Save davidhund/3838933 to your computer and use it in GitHub Desktop.
Save davidhund/3838933 to your computer and use it in GitHub Desktop.
CSS only 'lightbox'
/**
* 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);
}
<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>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment