<style type="text/css">
.cssplayStack {position:relative; width:520px; height:460px; margin:0 auto;}
.cssplayStack a {display:block; outline:0; position: absolute; left:20px; bottom:20px; width: 480px; height: 280px; 
background:url(trans.gif); z-index:25;
-moz-transition: 0s 1s;
-ms-transition: 0s 1s;
-o-transition: 0s 1s;
-webkit-transition: 0s 1s;
transition: 0s 1s;
}
.cssplayStack a:active, .cssplayStack a:focus {z-index: 40;}
.cssplayStack a:active + a, .cssplayStack a:focus + a {z-index: 50;}
.cssplayStack a.a1 {z-index: 40;}
.cssplayStack a.a9:active, .cssplayStack a.a9:focus {z-index:30;}
.cssplayStack img {display:block; position:absolute; left:260px; bottom:20px; border:1px solid #fff; 
box-shadow:0 0 5px rgba(0,0,0,0.7);
-moz-transition:1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
.cssplayStack .p1,
.cssplayStack .a1:active ~ .p2,
.cssplayStack .a1:focus ~ .p2,
.cssplayStack .a2:active ~ .p3,
.cssplayStack .a2:focus ~ .p3,
.cssplayStack .a3:active ~ .p4,
.cssplayStack .a3:focus ~ .p4,
.cssplayStack .a4:active ~ .p5,
.cssplayStack .a4:focus ~ .p5,
.cssplayStack .a5:active ~ .p6,
.cssplayStack .a5:focus ~ .p6,
.cssplayStack .a6:active ~ .p7,
.cssplayStack .a6:focus ~ .p7,
.cssplayStack .a7:active ~ .p8,
.cssplayStack .a7:focus ~ .p8,
.cssplayStack .a8:active ~ .p9,
.cssplayStack .a8:focus ~ .p9,
.cssplayStack .a9:active ~ .p1,
.cssplayStack .a9:focus ~ .p1
{width:100px; margin-left:-50px; margin-bottom:0; opacity:0; filter:alpha(opacity=0); z-index:20;}
.cssplayStack .p2,
.cssplayStack .a1:active ~ .p3,
.cssplayStack .a1:focus ~ .p3,
.cssplayStack .a2:active ~ .p4,
.cssplayStack .a2:focus ~ .p4,
.cssplayStack .a3:active ~ .p5,
.cssplayStack .a3:focus ~ .p5,
.cssplayStack .a4:active ~ .p6,
.cssplayStack .a4:focus ~ .p6,
.cssplayStack .a5:active ~ .p7,
.cssplayStack .a5:focus ~ .p7,
.cssplayStack .a6:active ~ .p8,
.cssplayStack .a6:focus ~ .p8,
.cssplayStack .a7:active ~ .p9,
.cssplayStack .a7:focus ~ .p9,
.cssplayStack .a8:active ~ .p1,
.cssplayStack .a8:focus ~ .p1,
.cssplayStack .a9:active ~ .p2,
.cssplayStack .a9:focus ~ .p2
{width:480px; margin-left:-240px; margin-bottom:0; opacity:1; filter:alpha(opacity=100); z-index:19;}
.cssplayStack .p3,
.cssplayStack .a1:active ~ .p4,
.cssplayStack .a1:focus ~ .p4,
.cssplayStack .a2:active ~ .p5,
.cssplayStack .a2:focus ~ .p5,
.cssplayStack .a3:active ~ .p6,
.cssplayStack .a3:focus ~ .p6,
.cssplayStack .a4:active ~ .p7,
.cssplayStack .a4:focus ~ .p7,
.cssplayStack .a5:active ~ .p8,
.cssplayStack .a5:focus ~ .p8,
.cssplayStack .a6:active ~ .p9,
.cssplayStack .a6:focus ~ .p9,
.cssplayStack .a7:active ~ .p1,
.cssplayStack .a7:focus ~ .p1,
.cssplayStack .a8:active ~ .p2,
.cssplayStack .a8:focus ~ .p2,
.cssplayStack .a9:active ~ .p3,
.cssplayStack .a9:focus ~ .p3
{width:384px; margin-left:-192px; margin-bottom:80px; opacity:0.9; filter:alpha(opacity=90); z-index:18;}
.cssplayStack .p4,
.cssplayStack .a1:active ~ .p5,
.cssplayStack .a1:focus ~ .p5,
.cssplayStack .a2:active ~ .p6,
.cssplayStack .a2:focus ~ .p6,
.cssplayStack .a3:active ~ .p7,
.cssplayStack .a3:focus ~ .p7,
.cssplayStack .a4:active ~ .p8,
.cssplayStack .a4:focus ~ .p8,
.cssplayStack .a5:active ~ .p9,
.cssplayStack .a5:focus ~ .p9,
.cssplayStack .a6:active ~ .p1,
.cssplayStack .a6:focus ~ .p1,
.cssplayStack .a7:active ~ .p2,
.cssplayStack .a7:focus ~ .p2,
.cssplayStack .a8:active ~ .p3,
.cssplayStack .a8:focus ~ .p3,
.cssplayStack .a9:active ~ .p4,
.cssplayStack .a9:focus ~ .p4
{width:308px; margin-left:-154px; margin-bottom:145px; opacity:0.8; filter:alpha(opacity=80); z-index:17;}
.cssplayStack .p5,
.cssplayStack .a1:active ~ .p6,
.cssplayStack .a1:focus ~ .p6,
.cssplayStack .a2:active ~ .p7,
.cssplayStack .a2:focus ~ .p7,
.cssplayStack .a3:active ~ .p8,
.cssplayStack .a3:focus ~ .p8,
.cssplayStack .a4:active ~ .p9,
.cssplayStack .a4:focus ~ .p9,
.cssplayStack .a5:active ~ .p1,
.cssplayStack .a5:focus ~ .p1,
.cssplayStack .a6:active ~ .p2,
.cssplayStack .a6:focus ~ .p2,
.cssplayStack .a7:active ~ .p3,
.cssplayStack .a7:focus ~ .p3,
.cssplayStack .a8:active ~ .p4,
.cssplayStack .a8:focus ~ .p4,
.cssplayStack .a9:active ~ .p5,
.cssplayStack .a9:focus ~ .p5
{width:246px; margin-left:-123px; margin-bottom:200px; opacity:0.7; filter:alpha(opacity=70); z-index:16;}
.cssplayStack .p6,
.cssplayStack .a1:active ~ .p7,
.cssplayStack .a1:focus ~ .p7,
.cssplayStack .a2:active ~ .p8,
.cssplayStack .a2:focus ~ .p8,
.cssplayStack .a3:active ~ .p9,
.cssplayStack .a3:focus ~ .p9,
.cssplayStack .a4:active ~ .p1,
.cssplayStack .a4:focus ~ .p1,
.cssplayStack .a5:active ~ .p2,
.cssplayStack .a5:focus ~ .p2,
.cssplayStack .a6:active ~ .p3,
.cssplayStack .a6:focus ~ .p3,
.cssplayStack .a7:active ~ .p4,
.cssplayStack .a7:focus ~ .p4,
.cssplayStack .a8:active ~ .p5,
.cssplayStack .a8:focus ~ .p5,
.cssplayStack .a9:active ~ .p6,
.cssplayStack .a9:focus ~ .p6
{width:196px; margin-left:-98px; margin-bottom:244px; opacity:0.6; filter:alpha(opacity=60); z-index:15;}
.cssplayStack .p7,
.cssplayStack .a1:active ~ .p8,
.cssplayStack .a1:focus ~ .p8,
.cssplayStack .a2:active ~ .p9,
.cssplayStack .a2:focus ~ .p9,
.cssplayStack .a3:active ~ .p1,
.cssplayStack .a3:focus ~ .p1,
.cssplayStack .a4:active ~ .p2,
.cssplayStack .a4:focus ~ .p2,
.cssplayStack .a5:active ~ .p3,
.cssplayStack .a5:focus ~ .p3,
.cssplayStack .a6:active ~ .p4,
.cssplayStack .a6:focus ~ .p4,
.cssplayStack .a7:active ~ .p5,
.cssplayStack .a7:focus ~ .p5,
.cssplayStack .a8:active ~ .p6,
.cssplayStack .a8:focus ~ .p6,
.cssplayStack .a9:active ~ .p7,
.cssplayStack .a9:focus ~ .p7
{width:156px; margin-left:-78px; margin-bottom:278px; opacity:0.5; filter:alpha(opacity=50); z-index:14;}
.cssplayStack .p8,
.cssplayStack .a1:active ~ .p9,
.cssplayStack .a1:focus ~ .p9,
.cssplayStack .a2:active ~ .p1,
.cssplayStack .a2:focus ~ .p1,
.cssplayStack .a3:active ~ .p2,
.cssplayStack .a3:focus ~ .p2,
.cssplayStack .a4:active ~ .p3,
.cssplayStack .a4:focus ~ .p3,
.cssplayStack .a5:active ~ .p4,
.cssplayStack .a5:focus ~ .p4,
.cssplayStack .a6:active ~ .p5,
.cssplayStack .a6:focus ~ .p5,
.cssplayStack .a7:active ~ .p6,
.cssplayStack .a7:focus ~ .p6,
.cssplayStack .a8:active ~ .p7,
.cssplayStack .a8:focus ~ .p7,
.cssplayStack .a9:active ~ .p8,
.cssplayStack .a9:focus ~ .p8
{width:126px; margin-left:-63px; margin-bottom:304px; opacity:0.4; filter:alpha(opacity=40); z-index:13;}
.cssplayStack .p9,
.cssplayStack .a1:active ~ .p1,
.cssplayStack .a1:focus ~ .p1,
.cssplayStack .a2:active ~ .p2,
.cssplayStack .a2:focus ~ .p2,
.cssplayStack .a3:active ~ .p3,
.cssplayStack .a3:focus ~ .p3,
.cssplayStack .a4:active ~ .p4,
.cssplayStack .a4:focus ~ .p4,
.cssplayStack .a5:active ~ .p5,
.cssplayStack .a5:focus ~ .p5,
.cssplayStack .a6:active ~ .p6,
.cssplayStack .a6:focus ~ .p6,
.cssplayStack .a7:active ~ .p7,
.cssplayStack .a7:focus ~ .p7,
.cssplayStack .a8:active ~ .p8,
.cssplayStack .a8:focus ~ .p8,
.cssplayStack .a9:active ~ .p9,
.cssplayStack .a9:focus ~ .p9
{width:100px; margin-left:-50px; margin-bottom:328px; opacity:0.3; filter:alpha(opacity=30); z-index:12;}
</style>
<div class ="cssplayStack">
<a class ="a1" href="#x1" tabindex="1"></a>
<a class ="a2" href="#x2" tabindex="2"></a>
<a class ="a3" href="#x3" tabindex="3"></a>
<a class ="a4" href="#x4" tabindex="4"></a>
<a class ="a5" href="#x5" tabindex="5"></a>
<a class ="a6" href="#x6" tabindex="6"></a>
<a class ="a7" href="#x7" tabindex="7"></a>
<a class ="a8" href="#x8" tabindex="8"></a>
<a class ="a9" href="#x9" tabindex="9"></a>
<img src="pic1.jpg" alt="" class ="p1">
<img src="pic2.jpg" alt="" class ="p2">
<img src="pic3.jpg" alt="" class ="p3">
<img src="pic4.jpg" alt="" class ="p4">
<img src="pic5.jpg" alt="" class ="p5">
<img src="pic6.jpg" alt="" class ="p6">
<img src="pic7.jpg" alt="" class ="p7">
<img src="pic8.jpg" alt="" class ="p8">
<img src="pic9.jpg" alt="" class ="p9">
</div>
<br><br><br><br><br><br>