<style type="text/css">
.cssplayStack {position:relative; width:750px; height:460px; margin:0 auto;}
.cssplayStack a {display:block; outline:0; position: absolute; left:135px; top:170px; 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; top:160px; border:1px solid #fff; box-shadow:0 5px 10px 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
{z-index:20; width:480px; margin-left:-240px; top:170px; left:375px; opacity:1; filter:alpha(opacity=100);}
.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
{z-index:18; width:350px; margin-left:-175px; top:130px; left:195px; opacity:0.9; filter:alpha(opacity=90);}
.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
{z-index:17; width:300px; margin-left:-150px; top:100px; left:155px; opacity:0.8; filter:alpha(opacity=80);}
.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
{z-index:16; width:220px; margin-left:-110px; top:70px; left:200px; opacity:0.7; filter:alpha(opacity=70);}
.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
{z-index:15; width:180px; margin-left:-90px; top:50px; left:283px; opacity:0.6; filter:alpha(opacity=60);}
.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
{z-index:15; width:180px; margin-left:-90px; top:50px; left:467px; opacity:0.6; filter:alpha(opacity=60);}
.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
{z-index:16; width:220px; margin-left:-110px; top:70px; left:550px; opacity:0.7; filter:alpha(opacity=70);}
.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
{z-index:17; width:300px; margin-left:-150px; top:100px; left:595px; opacity:0.8; filter:alpha(opacity=80);}
.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
{z-index:18; width:350px; margin-left:-175px; top:130px; left:555px; opacity:0.9; filter:alpha(opacity=90);}
</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>