Animation 4 abyme en CSS

Survolez le montage.

<div id="g0" class="gen">
<p id="g">&nbsp;</p>
<p id="g1" class="gen">&nbsp;</p>
<p id="g2" class="gen">&nbsp;</p>
<p id="g3" class="gen">&nbsp;</p>
<p id="g4" class="gen">&nbsp;</p>
<p id="g5" class="gen">&nbsp;</p>
<p id="g6" class="gen">&nbsp;</p>
<p id="g7" class="gen">&nbsp;</p>
<p id="g8" class="gen">&nbsp;</p>
</div>

<style><!--
.gen{background: url('http://ekladata.com/HM7ToTK71ijMi6WsJdwgsPUqGWY/1212.jpg'); background-size: cover; width:800px; height:600px;}  
#g0{position:relative; width:800px; height:600px; margin:10px auto;}
#g{position:absolute; z-index:10; transform:translate(0px,0px) ; width:800px; height:600px;}
#g1{position:absolute; z-index:1; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g2{position:absolute; z-index:2; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g3{position:absolute; z-index:3; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g4{position:absolute; z-index:4; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g5{position:absolute; z-index:5; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g6{position:absolute; z-index:6; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g7{position:absolute; z-index:7; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g8{position:absolute; z-index:8; transition:all 2s linear; transform:translate(0px,0px) rotate(0deg); border:6px ridge white; }
#g:hover ~ #g1{width:533px; height:400px; transform:translate(133px,50px) rotate(10deg); border:3px solid white;}
#g:hover ~ #g2{width:470px; height:353px; transform:translate(183px,100px) rotate(20deg);border:3px solid white;}
#g:hover ~ #g3{width:444px; height:333px; transform:translate(178px,133px) rotate(40deg);border:3px solid white;}
#g:hover ~ #g4{width:400px; height:300px; transform:translate(200px,150px) rotate(60deg);border:2px solid white;}
#g:hover ~ #g5{width:267px; height:200px; transform:translate(266px,200px) rotate(80deg);border:2px solid white;}
#g:hover ~ #g6{width:200px; height:150px; transform:translate(300px,225px) rotate(100deg);border:1px solid white;}
#g:hover ~ #g7{width:160px; height:120px; transform:translate(320px,240px) rotate(120deg);border:1px solid white;}
#g:hover ~ #g8{width:100px; height:75px; transform:translate(350px,262px) rotate(140deg);border:1px solid white;}
--></style>