Animation 8 abyme CSS

Survolez le montage 800x600px.

<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>
<p id="g9" class="gen">&nbsp;</p>
<p id="g10" class="gen">&nbsp;</p>
</div>

<style><!--
.gen{background: url('http://ekladata.com/DnEBd4FOEc3ukl_QG1OD4pcOPnc/1241.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(-6px,-6px) ; width:800px; height:600px; border:6px ridge grey;}

#g1, #g2, #g3, #g4, #g5, #g6, #g7, #g8, #g9, #g10{position:absolute; z-index:2; transition:all 2s linear; width:0px; height:0px;  transform:translate(0px,0px) rotatey(180deg);}
#g:hover ~ #g1{position:absolute; z-index:1; transition:all 2s linear 4.5s; width:667px; height:500px;  transform:translate(67px,50px) rotatey(0deg); border:3px solid white;}
#g:hover ~ #g2{position:absolute; z-index:2; transition:all 2s linear 4s; width:533px; height:400px;  transform:translate(133px,100px);border:3px solid white;}
#g:hover ~ #g3{position:absolute; z-index:3; transition:all 2s linear 3.5s; width:444px; height:333px;  transform:translate(178px,133px);border:3px solid white;}
#g:hover ~ #g4{position:absolute; z-index:4; transition:all 2s linear 3s; width:350px; height:270px;  transform:translate(225px,165px);border:2px solid white;}
#g:hover ~ #g5{position:absolute; z-index:5; transition:all 2s linear 2.5s; width:267px; height:200px;  transform:translate(266px,200px);border:2px solid white;}
#g:hover ~ #g6{position:absolute; z-index:6; transition:all 2s linear 2s; width:200px; height:150px;  transform:translate(300px,225px);border:1px solid white;}
#g:hover ~ #g7{position:absolute; z-index:7; transition:all 2s linear 1.5s; width:160px; height:120px;  transform:translate(320px,240px);border:1px solid white;}
#g:hover ~ #g8{position:absolute; z-index:8; transition:all 2s linear 1s; width:115px; height:90px;  transform:translate(342px,255px);border:1px solid white;}
#g:hover ~ #g9{position:absolute; z-index:9; transition:all 2s linear 0.5s; width:80px; height:60px;  transform:translate(360px,270px);border:1px solid white;}
#g:hover ~ #g10{position:absolute; z-index:9; transition:all 2s linear 0s; width:55px; height:40px;  transform:translate(375px,280px);border:1px solid white;}
--></style>