<style type="text/css">
#outer {width:600px; height:400px; position:relative; margin:50px auto;}
#outer input {display:none;}
#outer div {width:250px; height:350px; padding:25px; position:absolute; top:0; left:150px; background:#fff; 
border-radius:5px; z-index:80; box-shadow:0 5px 10px rgba(0,0,0,0.5);
-webkit-transform: translate3d(0.5, 0.5, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
transform: translate3d(0.5, 0.5, 0);
transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
transition:0.75s;
-o-transition:0.75s;
-moz-transition:0.75s;
-webkit-transition:0.75s;
}
#outer label {display:block; width:100%; height:100%; z-index:100; cursor:pointer; position:absolute; left:0; top:0; 
background:url(trans.gif);
-webkit-tap-highlight-color:rgba(0,0,0,0);
tap-highlight-color:rgba(0,0,0,0);
}
#outer h2 {padding:20px 0; margin:0; font:600 22px/40px 'Open Sans', arial, sans-serif; color:#2e6faf;}
#outer p {padding:0; margin:0; font:400 13px/18px 'Open Sans', arial, sans-serif; color:#444;}
#outer p a {color:#080;}
#outer p a:hover {text-decoration:none;}
#panel1l:checked ~ div.p1,
#panel2l:checked ~ div.p2,
#panel3l:checked ~ div.p3,
#panel4l:checked ~ div.p4,
#panel5l:checked ~ div.p5,
#panel6l:checked ~ div.p6,
#panel1r:checked ~ div.p1,
#panel2r:checked ~ div.p2,
#panel3r:checked ~ div.p3,
#panel4r:checked ~ div.p4,
#panel5r:checked ~ div.p5,
#panel6r:checked ~ div.p6
{left:150px; z-index:100; box-shadow:0 5px 20px rgba(0,0,0,0.5);
transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
#panel1l:checked ~ div.p2,
#panel2l:checked ~ div.p3,
#panel3l:checked ~ div.p4,
#panel4l:checked ~ div.p5,
#panel5l:checked ~ div.p6,
#panel6l:checked ~ div.p1,
#panel1r:checked ~ div.p2,
#panel2r:checked ~ div.p3,
#panel3r:checked ~ div.p4,
#panel4r:checked ~ div.p5,
#panel5r:checked ~ div.p6,
#panel6r:checked ~ div.p1
{left:300px; z-index:90;
transform: scale(0.75, 0.75);
-o-transform: scale(0.75, 0.75);
-ms-transform: scale(0.75, 0.75);
-webkit-transform: scale(0.75, 0.75);
}
#panel1l:checked ~ div.p6,
#panel2l:checked ~ div.p1,
#panel3l:checked ~ div.p2,
#panel4l:checked ~ div.p3,
#panel5l:checked ~ div.p4,
#panel6l:checked ~ div.p5,
#panel1r:checked ~ div.p6,
#panel2r:checked ~ div.p1,
#panel3r:checked ~ div.p2,
#panel4r:checked ~ div.p3,
#panel5r:checked ~ div.p4,
#panel6r:checked ~ div.p5
{left:0; z-index:90;
transform: scale(0.75, 0.75);
-o-transform: scale(0.75, 0.75);
-ms-transform: scale(0.75, 0.75);
-webkit-transform: scale(0.75, 0.75);
}
#panel1l:checked ~ div.p2 label.left {display:none;}
#panel1l:checked ~ div.p1 label {display:none;}
#panel1l:checked ~ div.p6 label.right {display:none;}
#panel6l:checked ~ div.p1 label.left {display:none;}
#panel6l:checked ~ div.p6 label {display:none;}
#panel6l:checked ~ div.p5 label.right {display:none;}
#panel5l:checked ~ div.p6 label.left {display:none;}
#panel5l:checked ~ div.p5 label {display:none;}
#panel5l:checked ~ div.p4 label.right {display:none;}
#panel4l:checked ~ div.p5 label.left {display:none;}
#panel4l:checked ~ div.p4 label {display:none;}
#panel4l:checked ~ div.p3 label.right {display:none;}
#panel3l:checked ~ div.p4 label.left {display:none;}
#panel3l:checked ~ div.p3 label {display:none;}
#panel3l:checked ~ div.p2 label.right {display:none;}
#panel2l:checked ~ div.p3 label.left {display:none;}
#panel2l:checked ~ div.p2 label {display:none;}
#panel2l:checked ~ div.p1 label.right {display:none;}
#panel1r:checked ~ div.p2 label.right {display:none;}
#panel1r:checked ~ div.p1 label {display:none;}
#panel1r:checked ~ div.p6 label.left {display:none;}
#panel6r:checked ~ div.p1 label.right {display:none;}
#panel6r:checked ~ div.p6 label {display:none;}
#panel6r:checked ~ div.p5 label.left {display:none;}
#panel5r:checked ~ div.p6 label.right {display:none;}
#panel5r:checked ~ div.p5 label {display:none;}
#panel5r:checked ~ div.p4 label.left {display:none;}
#panel4r:checked ~ div.p5 label.right {display:none;}
#panel4r:checked ~ div.p4 label {display:none;}
#panel4r:checked ~ div.p3 label.left {display:none;}
#panel3r:checked ~ div.p4 label.right {display:none;}
#panel3r:checked ~ div.p3 label {display:none;}
#panel3r:checked ~ div.p2 label.left {display:none;}
#panel2r:checked ~ div.p3 label.right {display:none;}
#panel2r:checked ~ div.p2 label {display:none;}
#panel2r:checked ~ div.p1 label.left {display:none;}
</style>
<div id="outer">
<input name="pics" id="panel1l" type="radio">
<input name="pics" id="panel2l" type="radio">
<input name="pics" id="panel3l" type="radio">
<input name="pics" id="panel4l" type="radio">
<input name="pics" id="panel5l" type="radio">
<input name="pics" id="panel6l" type="radio">
<input name="pics" id="panel1r" type="radio">
<input name="pics" id="panel2r" type="radio">
<input name="pics" id="panel3r" type="radio">
<input checked="checked" name="pics" id="panel4r" type="radio">
<input name="pics" id="panel5r" type="radio">
<input name="pics" id="panel6r" type="radio">
    <div class ="p1">
	   <img src="thumbg.jpg" alt="">
	   <h2>Swipe Me Too!</h2>
	   <p>A re-work of the original <a href="#">Swipe Me!</a>
 a responsive full screen lightbox/slideshow using minimal jQuery and CSS3 styles.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel1l"></label><label class ="right" for="panel1r"></label>
    </div>
    <div class ="p2">
	   <img src="thumbf.jpg" alt="">
	   <h2>Swipe Me!</h2>
	   <p>The original responsive full screen slideshows with 'swipe' action.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel2l"></label><label class ="right" for="panel2r"></label>
    </div>
    <div class ="p3">
	   <img src="thumba.jpg" alt="">
	   <h2>Swipe Me Inline!</h2>
	   <p>A re-coded and re-styled version of <a href="#">Swipe Me Too!</a>
 to produce a responsive inline version.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel3l"></label><label class ="right" for="panel3r"></label>
    </div>
    <div class ="p4">
	   <img src="thumbb.jpg" alt="">
	   <h2>CSS Play-er Playlist</h2>
	   <p>CSSplay-er v2.0 is a responsive video player with playlists, minimal controls and
 using standard HTML5 video code.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel4l"></label><label class ="right" for="panel4r"></label>
    </div>
    <div class ="p5">
	   <img src="thumbc.jpg" alt="">
	   <h2>CSS Play-er</h2>
	   <p>CSSplay-er is a basic HTML5 player with the normal controls of 
play/pause, mute, fullscreen (for supporting browsers) and 
volume/progress sliders, and support for IE7/8.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel5l"></label><label class ="right" for="panel5r"></label>
    </div>
    <div class ="p6">
	   <img src="thumbd.jpg" alt="">
	   <h2>Metro Menu</h2>
	   <p>A Windows 8 'Metro' style menu that works in all modern browsers including iOS and
 Android OS using just CSS.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel6l"></label><label class ="right" for="panel6r"></label>
    </div>
</div>