<style type="text/css">
.container {width:800px; height:600px; overflow:hidden; margin:0 auto; position:relative; z-index:10;}
.stacking {width:400px; height:300px; margin:100px auto; position:relative; z-index:10;
-webkit-perspective: 2400px;
-moz-perspective: 2400px;
-ms-perspective: 2400px;
-o-perspective: 2400px;
perspective: 2400px;
}
.container input {position:absolute; left:-9999px;}
.container .stacking div {position:absolute; left:0; top:0; z-index:10;
-webkit-transform-style : preserve-3d;
-moz-transform-style : preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
transform-style : preserve-3d;
}
.container .stacking div .banner {position:absolute; left:0; top:290px; width:400px; text-align:center; opacity:0; 
font:normal 20px/25px 'Archivo Narrow', sans-serif; color:#800;
-webkit-transition:0s;
-moz-transition:0s;
-ms-transition:0s;
-o-transition:0s;
transition:0s;
}
.container .stacking div .prev,
.container .stacking div .next {display:block; position:absolute; left:-9999px; top:390px; width:48px; height:48px;
-webkit-transition: left 0s 0.8s;
-moz-transition: left 0s 0.8s;
-ms-transition: left 0s 0.8s;
-o-transition: left 0s 0.8s;
transition: left 0s 0.8s;
}
.container .stacking div .prev {background:url(prev1.png) no-repeat center center;}
.container .stacking div .next {background:url(next1.png) no-repeat center center;}
.container .stack {width:800px; position:absolute; top:480px; left:0;}
.container .stack ul {padding:0; margin:0; list-style:none; position:absolute; top:0;}
.container .stack ul.leftPile {left:5px;}
.container .stack ul.rightPile {right:5px;}
.container .stack ul li {height:3px; width:340px; background:#ccc; margin:5px 0;
-webkit-transition:0s 0.4s;
-moz-transition:0s 0.4s;
-ms-transition:0s 0.4s;
-o-transition:0s 0.4s;
transition:0s 0.4s;
}
.container .stack ul.rightPile li {background:transparent;
-webkit-transition:0s 0.4s;
-moz-transition:0s 0.4s;
-ms-transition:0s 0.4s;
-o-transition:0s 0.4s;
transition:0s 0.4;
}
.container .stacking div > img {
padding:10px; background:#fff; box-shadow: 0 0 5px rgba(0,0,0,0.4);
position: absolute;
left: -10px; 
top: -10px;
display: block;
opacity:0;
-webkit-transition: -webkit-transform 0.8s 0s, opacity 0.8s 0s; 
-moz-transition: -moz-transform 0.8s 0s, opacity 0.8s 0s; 
-ms-transition: -ms-transform 0.8s 0s, opacity 0.8s 0s; 
-o-transition: -o-transform 0.8s 0s, opacity 0.8s 0s; 
transition: transform 0.8s 0s, opacity 0.8s 0s; 
-webkit-transform-origin: 50% 375px 0px;
-moz-transform-origin: 50% 375px 0px;
-ms-transform-origin: 50% 375px 0px;
-o-transform-origin: 50% 375px 0px;
transform-origin: 50% 375px 0px;
-webkit-transform: rotateZ(-91deg) rotateY(91deg);
-moz-transform: rotateZ(-91deg) rotateY(91deg);
-ms-transform: rotateZ(-91deg) rotateY(91deg);
-o-transform: rotateZ(-91deg) rotateY(91deg);
transform: rotateZ(-91deg) rotateY(91deg);
-webkit-transform-style : preserve-3d;
-moz-transform-style : preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
transform-style : preserve-3d;
}
/* pic checked action */
#p1:checked ~ .stacking div:nth-of-type(1),
#p2:checked ~ .stacking div:nth-of-type(2),
#p3:checked ~ .stacking div:nth-of-type(3),
#p4:checked ~ .stacking div:nth-of-type(4),
#p5:checked ~ .stacking div:nth-of-type(5),
#p6:checked ~ .stacking div:nth-of-type(6),
#p7:checked ~ .stacking div:nth-of-type(7),
#p8:checked ~ .stacking div:nth-of-type(8),
#p9:checked ~ .stacking div:nth-of-type(9),
#p10:checked ~ .stacking div:nth-of-type(10)
{z-index:100;}
#p2:checked ~ .stacking div:nth-child(1) > img,
#p3:checked ~ .stacking div:nth-child(2) > img,
#p4:checked ~ .stacking div:nth-child(3) > img,
#p5:checked ~ .stacking div:nth-child(4) > img,
#p6:checked ~ .stacking div:nth-child(5) > img,
#p7:checked ~ .stacking div:nth-child(6) > img,
#p8:checked ~ .stacking div:nth-child(7) > img,
#p9:checked ~ .stacking div:nth-child(8) > img,
#p10:checked ~ .stacking div:nth-child(9) > img {
opacity: 0;
-webkit-transition: -webkit-transform 0.8s 0s, opacity 0.4s 0.4s; 
-moz-transition: -moz-transform 0.8s 0s, opacity 0.4s 0.4s; 
-ms-transition: -ms-transform 0.8s 0s, opacity 0.4s 0.4s; 
-o-transition: -o-transform 0.8s 0s, opacity 0.4s 0.4s; 
transition: transform 0.8s 0s, opacity 0.4s 0.4s; 
-webkit-transform: rotateZ(91deg) rotateY(-91deg);
-moz-transform: rotateZ(91deg)  rotateY(-91deg);
-ms-transform: rotateZ(91deg) rotateY(-91deg);
-o-transform: rotateZ(91deg) rotateY(-91deg);
transform: rotateZ(91deg) rotateY(-91deg);
}
#p1:checked ~ .stacking div:nth-child(1) > img,
#p2:checked ~ .stacking div:nth-child(2) > img,
#p3:checked ~ .stacking div:nth-child(3) > img,
#p4:checked ~ .stacking div:nth-child(4) > img,
#p5:checked ~ .stacking div:nth-child(5) > img,
#p6:checked ~ .stacking div:nth-child(6) > img,
#p7:checked ~ .stacking div:nth-child(7) > img,
#p8:checked ~ .stacking div:nth-child(8) > img,
#p9:checked ~ .stacking div:nth-child(9) > img,
#p10:checked ~ .stacking div:nth-child(10) > img
{
opacity: 1;
-webkit-transition: -webkit-transform 0.8s 0s, opacity 0.4s 0s; 
-moz-transition: -moz-transform 0.8s 0s, opacity 0.4s 0s; 
-ms-transition: -ms-transform 0.8s 0s, opacity 0.4s 0s; 
-o-transition: -o-transform 0.8s 0s, opacity 0.4s 0s; 
transition: transform 0.8s 0s, opacity 0.4s 0s; 
-webkit-transform: rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateY(0deg) rotateZ(0deg);
-o-transform: rotateY(0deg) rotateZ(0deg);
transform: rotateY(0deg) rotateZ(0deg);
}
#p2:checked ~ .stacking div:nth-child(2) .prev,
#p3:checked ~ .stacking div:nth-child(3) .prev,
#p4:checked ~ .stacking div:nth-child(4) .prev,
#p5:checked ~ .stacking div:nth-child(5) .prev,
#p6:checked ~ .stacking div:nth-child(6) .prev,
#p7:checked ~ .stacking div:nth-child(7) .prev,
#p8:checked ~ .stacking div:nth-child(8) .prev,
#p9:checked ~ .stacking div:nth-child(9) .prev,
#p10:checked ~ .stacking div:nth-child(10) .prev
{left:152px;}
#p1:checked ~ .stacking div:nth-child(1) .next,
#p2:checked ~ .stacking div:nth-child(2) .next,
#p3:checked ~ .stacking div:nth-child(3) .next,
#p4:checked ~ .stacking div:nth-child(4) .next,
#p5:checked ~ .stacking div:nth-child(5) .next,
#p6:checked ~ .stacking div:nth-child(6) .next,
#p7:checked ~ .stacking div:nth-child(7) .next,
#p8:checked ~ .stacking div:nth-child(8) .next,
#p9:checked ~ .stacking div:nth-child(9) .next
{left:202px;}
#p1:checked ~ .stacking div:nth-child(1) .banner,
#p2:checked ~ .stacking div:nth-child(2) .banner, 
#p3:checked ~ .stacking div:nth-child(3) .banner, 
#p4:checked ~ .stacking div:nth-child(4) .banner, 
#p5:checked ~ .stacking div:nth-child(5) .banner, 
#p6:checked ~ .stacking div:nth-child(6) .banner, 
#p7:checked ~ .stacking div:nth-child(7) .banner, 
#p8:checked ~ .stacking div:nth-child(8) .banner, 
#p9:checked ~ .stacking div:nth-child(9) .banner, 
#p10:checked ~ .stacking div:nth-child(10) .banner 
{opacity:1;
-webkit-transition:0.5s 0.8s;
-moz-transition:0.5s 0.8s;
-ms-transition:0.5s 0.8s;
-o-transition:0.5s 0.8s;
transition:0.5s 0.8s;
}
#p1:checked ~ .stacking div .p1 img,
#p2:checked ~ .stacking div .p2 img,
#p3:checked ~ .stacking div .p3 img,
#p4:checked ~ .stacking div .p4 img,
#p5:checked ~ .stacking div .p5 img,
#p6:checked ~ .stacking div .p6 img,
#p7:checked ~ .stacking div .p7 img,
#p8:checked ~ .stacking div .p8 img,
#p9:checked ~ .stacking div .p9 img,
#p10:checked ~ .stacking div .p10 img
{display:none;}
#p2:checked ~ .stack .leftPile li:nth-child(-n+1),
#p3:checked ~ .stack .leftPile li:nth-child(-n+2),
#p4:checked ~ .stack .leftPile li:nth-child(-n+3),
#p5:checked ~ .stack .leftPile li:nth-child(-n+4),
#p6:checked ~ .stack .leftPile li:nth-child(-n+5),
#p7:checked ~ .stack .leftPile li:nth-child(-n+6),
#p8:checked ~ .stack .leftPile li:nth-child(-n+7),
#p9:checked ~ .stack .leftPile li:nth-child(-n+8),
#p10:checked ~ .stack .leftPile li:nth-child(-n+9)
{background:transparent;}
#p2:checked ~ .stack .rightPile li:nth-last-child(-n+1),
#p3:checked ~ .stack .rightPile li:nth-last-child(-n+2),
#p4:checked ~ .stack .rightPile li:nth-last-child(-n+3),
#p5:checked ~ .stack .rightPile li:nth-last-child(-n+4),
#p6:checked ~ .stack .rightPile li:nth-last-child(-n+5),
#p7:checked ~ .stack .rightPile li:nth-last-child(-n+6),
#p8:checked ~ .stack .rightPile li:nth-last-child(-n+7),
#p9:checked ~ .stack .rightPile li:nth-last-child(-n+8),
#p10:checked ~ .stack .rightPile li:nth-last-child(-n+9)
{background:#ccc;}
</style>
<div class ="container">
<form action="">
    <input name="book" id="p1" type="radio">
    <input name="book" id="p2" type="radio">
    <input name="book" id="p3" type="radio">
    <input checked="checked" name="book" id="p4" type="radio">
    <input name="book" id="p5" type="radio">
    <input name="book" id="p6" type="radio">
    <input name="book" id="p7" type="radio">
    <input name="book" id="p8" type="radio">
    <input name="book" id="p9" type="radio">
    <input name="book" id="p10" type="radio">

    <div class ="stacking">
	   <div><img src="p1.jpg" alt=""><h5 class ="banner">Heading for image number one</h5>
<label class ="next p2" for="p2"><img src="next.png" alt=""></label></div>
	   <div><img src="p2.jpg" alt=""><h5 class ="banner">Caption for image number two</h5>
<label class ="prev p1" for="p1"><img src="prev.png" alt=""></label><label class ="next p3" for="p3">
<img src="next.png" alt=""></label></div>
	   <div><img src="p3.jpg" alt=""><h5 class ="banner">This is image number three</h5>
<label class ="prev p2" for="p2"><img src="prev.png" alt=""></label><label class ="next p4" for="p4">
<img src="next.png" alt=""></label></div>
	   <div><img src="p4.jpg" alt=""><h5 class ="banner">The fourth image caption</h5>
<label class ="prev p3" for="p3"><img src="prev.png" alt=""></label><label class ="next p5" for="p5">
<img src="next.png" alt=""></label></div>
	   <div><img src="p5.jpg" alt=""><h5 class ="banner">Photograph number five</h5>
<label class ="prev p4" for="p4"><img src="prev.png" alt=""></label><label class ="next p6" for="p6">
<img src="next.png" alt=""></label></div>
	   <div><img src="p6.jpg" alt=""><h5 class ="banner">Heading for image number six</h5>
<label class ="prev p5" for="p5"><img src="prev.png" alt=""></label><label class ="next p7" for="p7">
<img src="next.png" alt=""></label></div>
	   <div><img src="p7.jpg" alt=""><h5 class ="banner">Image number seven description here</h5>
<label class ="prev p6" for="p6"><img src="prev.png" alt=""></label><label class ="next p8" for="p8">
<img src="next.png" alt=""></label></div>
	   <div><img src="p8.jpg" alt=""><h5 class ="banner">Caption for image eight</h5>
<label class ="prev p7" for="p7"><img src="prev.png" alt=""></label><label class ="next p9" for="p9">
<img src="next.png" alt=""></label></div>
	   <div><img src="p9.jpg" alt=""><h5 class ="banner">Heading for photograph number nine</h5>
<label class ="prev p8" for="p8"><img src="prev.png" alt=""></label><label class ="next p10" for="p10">
<img src="next.png" alt=""></label></div>
	   <div><img src="p10.jpg" alt=""><h5 class ="banner">Finally the caption for image number ten</h5>
<label class ="prev p9" for="p9"><img src="prev.png" alt=""></label></div>
    </div>
    <div class ="stack">
	   <ul class ="leftPile"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li></ul>
	   <ul class ="rightPile"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li></ul>
    </div>
</form>
</div>