CSS3 Galerie

HTML

<!--  THUMBNAILS ###################################### -->
<div class="c3BoxImages">
<label for="show01" class="xBox"><img src="http://fs1.directupload.net/images/150207/a8lmpduy.jpg" alt="Nine Inch Nails" /></label> 
<label for="show02" class="xBox"><img src="http://fs1.directupload.net/images/150207/rv7h6eeo.jpg" alt="Laibach" /></label> 
<label for="show03" class="xBox"><img src="http://fs1.directupload.net/images/150207/qnu4hsw2.jpg" alt="Green Day" /></label> 
</div>

<input name="show0" id="show01" class="show0" type="radio" />
<input name="show0" id="show02" class="show0" type="radio" />
<input name="show0" id="show03" class="show0" type="radio" />

<input checked="checked" name="show0" id="show04" class="show0" type="radio" />


<div class="c3Box">


<!-- BILD 001 ######################################### -->
<div class="dark x1">
<div class="block">
<div class="cl-back"><label for="show03" class="back"><img src="http://fs1.directupload.net/images/150207/9ejrrofm.png" 
alt="#" /></label></div>
<div class="cl-next"><label for="show02" class="next"><img src="http://fs1.directupload.net/images/150207/i5labl6b.png" 
alt="#" /></label></div>
<img class="pic400" src="http://fs2.directupload.net/images/150207/75gs4o7l.jpg" alt="#" />

<div class="subtitle">
<h2><a href="https://www.youtube.com/watch?v=xwhBRJStz7w" target="_blank">Nine Inch Nails</a></h2></div>
<label for="show04" class="close"><img src="http://fs2.directupload.net/images/150207/hn9feknj.png" alt="Close" /></label></div></div>


<!-- BILD 002 ######################################### -->
<div class="dark x2">
<div class="block">
<div class="cl-back"><label for="show01" class="back"><img src="http://fs1.directupload.net/images/150207/9ejrrofm.png" 
alt="#" /></label></div>
<div class="cl-next"><label for="show03" class="next"><img src="http://fs1.directupload.net/images/150207/i5labl6b.png" 
alt="#" /></label></div>
<img class="pic400" src="http://fs2.directupload.net/images/150207/6922qf6f.jpg"...

CSS

input.show0                         {position:absolute; left:-9999px}

#show01:checked ~ .c3Box,
#show02:checked ~ .c3Box,
#show03:checked ~ .c3Box            {left:0}

#show01:checked ~ .c3Box .x1, 
#show02:checked ~ .c3Box .x2, 
#show03:checked ~ .c3Box .x3        {z-index:100}

#show01:checked ~ .c3Box .x1 .block, 
#show02:checked ~ .c3Box .x2 .block, 
#show03:checked ~ .c3Box .x3 .block {opacity:1; z-index:20}

label                              {cursor:pointer}
a                                  {color:#f8f8f8; outline:none}
.c3BoxImages                       {text-align:center; padding:5px 5px 1px; border:1px solid white; width:854px; margin-left:auto; margin-right:auto; white-space:nowrap}
/* .xBox img                       {border:0} */

.c3Box                             {z-index:50; display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; background:rgba(0,0,0,0.9)}
.c3Box .dark                       {z-index:10; display:table-cell; position:absolute; width:100%; height:100%; left:0; top:0; text-align:center}
.c3Box .block                      {display:inline-block; margin:50px auto; padding:10px 10px 5px; background:#f8f8f8; position:relative; text-align:left; opacity:0; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s}

.c3Box .block .cl-back             {z-index:30; position:absolute; left:20px; top:15px; right:50%; bottom:15px}
.c3Box .block .cl-back .back       {opacity:0; position:absolute; top:150px; left:0; -webkit-transition:0.25s; -moz-transition:0.25s; -o-transition:0.25s; transition:0.25s}
.c3Box .block .cl-back:hover .back {opacity:1}

.c3Box .block .cl-next             {z-index:30; position:absolute; right:19px; top:15px; left:50%; bottom:15px}
.c3Box .block .cl-next .next       {opacity:0; position:absolute; top:150px; right:0; -webkit-transition:0.25s; -moz-transition:0.25s; -o-transition:0.25s; transition:0.25s}
.c3Box .block .cl-next:hover .next {opacity:1}

.c3Box .block .subtitle ...