Animation 5 abyme CSS

Essayons d'inverser le mouvement: le montage (800x600px) affiché est avec mise en abyme et redevient image fixe au survol.

<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/UxBqrKiXxcDHqFMrOO0eNloU-WM/1233.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; width:667px; height:500px; transform:translate(133px,0px); border:3px solid white;}
#g2{position:absolute; z-index:2; transition:all 2s linear; width:533px; height:400px; transform:translate(267px,0px);border:3px solid white;}
#g3{position:absolute; z-index:3; transition:all 2s linear; width:444px; height:333px; transform:translate(356px,0px);border:3px solid white;}
#g4{position:absolute; z-index:4; transition:all 2s linear; width:350px; height:270px; transform:translate(450px,0px);border:2px solid white;}
#g5{position:absolute; z-index:5; transition:all 2s linear; width:267px; height:200px; transform:translate(533px,0px);border:2px solid white;}
#g6{position:absolute; z-index:6; transition:all 2s linear; width:200px; height:150px; transform:translate(600px,0px);border:1px solid white;}
#g7{position:absolute; z-index:7; transition:all 2s linear; width:160px; height:120px; transform:translate(640px,0px);border:1px solid white;}
#g8{position:absolute; z-index:8; transition:all 2s linear; width:115px; height:90px; transform:translate(685px,0px);border:1px solid white;}
#g9{position:absolute; z-index:9; transition:all 2s linear; width:80px; height:60px; transform:translate(720px,0px);border:1px solid white;}
#g10{position:absolute; z-index:9; transition:all 2s linear; width:55px; height:40px; transform:translate(745px,0px);border:1px solid white;}

#g:hover ~ #g1, #g:hover ~ #g2, #g:hover ~ #g3, #g:hover ~ #g4, #g:hover ~ #g5, #g:hover ~ #g6, #g:hover ~ #g7, #g:hover ~ #g8, #g:hover ~ #g9, #g:hover ~ #g10{width:800px; height:600px; transform:translate(0px,0px); border:0px solid white;}
--></style>