Pure CSS Lightbox

Eine Skizze über eine CSS§ Lightbox.

by BinaryAcid

HTML

<div style="display: table; margin: 0 auto;">
<div class="grid">
<label for="box1"><span style="">Andrei Rubljow: Troika »</span></label>
             <input type="radio" id="box1" name="gallery" />
<div class="layer">
<label id="tro" for="zu" title=""></label>
</div>
</div>
<div class="grid">
<label  for="box2"><span style="">Vladimirskaya »</span></label>
               <input type="radio" id="box2" name="gallery" />
                    <div class="layer">
                         <label id="vla" for="zu" title=""></label>
</div>
</div>
<div class="grid">
<label  for="box3"><span style="">Christus Pantokrator »</span></label>
               <input type="radio" id="box3" name="gallery" />
                    <div class="layer">
                         <label id="pan" for="zu" title=""></label>
</div>
</div>
 </div>
<input type="radio" id="zu" name="gallery" />

CSS

.grid {
    display: block;
    padding: 10px 0;
}
label span{
    font-size: 26px;
    font-family: arial;
}
input ~ .layer label{
     position: absolute;
    top:0;
     left:50%;
    height: 10px;
    width: 10px;
    background-color: transparent;
        background-color: rgba(250, 250, 250, 0);
        -webkit-transition: all .5s ease-in-out;
               -moz-transition: all .5s ease-in-out;
                    -o-transition: all .5s ease-in-out;
                         transition: all .5s ease-in-out;
}
input:checked ~ .layer label{
    position: absolute;
    height: 500px;
     width: 680px;
    top:0;
    left:-110px;
    background-color: transparent;
           background-color: rgba(133, 133, 133, 0.6);
}
input:checked ~ .layer #tro:before {
    content:url("http://goo.gl/vxqP9");
    position: absolute;
    top: 50px;
    left:228px; 
     z-index: 9999;
}
input:checked ~ .layer #vla:before {
    content:url("http://goo.gl/qlY2o");
    position: absolute;
    top: 50px;
    left:228px; 
    z-index: 9999;
}
input:checked ~ .layer #pan:before {
    content:url("http://goo.gl/F9Nu0");
    position: absolute;
    top: 50px;
    left:228px; 
    z-index: 9999;
}
input:checked ~ .layer label:after {
    content:url("http://goo.gl/v968O");
    position: absolute;
    top: 5px;
    right:5px;
}
#zu, input { 
    display: none; 
}