Lightbox

CSSonly lightbox

by rdillman

HTML

<h1>Lightbox</h1>

<input type="radio" name="lightbox" id="lb1" />
<div class="lighbox">
    <img src="http://lorempixel.com/200/200/cats/" alt="a cats" />
</div>
<input type="radio" name="lightbox" id="lb2" />
<div class="lighbox">
    <img src="http://lorempixel.com/200/200/sports/" alt="a sports" />
</div>
<input type="radio" name="lightbox" id="lb3" />
<div class="lighbox">
    <img src="http://lorempixel.com/200/200/food/" alt="a foods" />
</div>
<nav class="navigation">
    <label for="lb1">1</label>
    <label for="lb2">2</label>
    <label for="lb3">3</label>
</nav>

CSS

body {
    background: #ece5d7;
}
h1 {
    display:block;
    position:fixed;
    top: 0;
    margin: 0 auto;
    width: 100%;
    text-align:center;
    font-size: 2em;
    text-transform: uppercase;
    font-family: arial;
    /* WebKit (Safari/Chrome) Only */
    -webkit-text-stroke: 1px black;
    color: white;
    text-shadow: 3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera and nice enhancement for WebKit */
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
label {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    display: inline-block;
    font-size: 0.75em;
    height: 20px;
    line-height: 20px;
    margin: 0 2px 0 0;
    padding: 2px;
    text-align: center;
    width: 20px;
    cursor: pointer;
}
input {
    bottom: -9999px;
    left: -9999px;
    position: absolute;
}
input + .lighbox {
    visibility: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 0;
    height: 0;
    padding: 20px;
    margin: 0;
    background: white;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
    -webkit-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
    -moz-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
    -o-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
    transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
}
input:checked + .lighbox {
    visibility: visible;
    margin: -100px -100px;
    height:200px;
    width:200px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5), 0 0 0 4000px rgba(0, 0, 0, .3);
    -webkit-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
    -moz-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s...