Animation 3 abyme en CSS

En pensant aux personnes qui utilisent le format 800x600px, voici une possibilité de mise en abyme.

Cette présentation a l'avantage de bien afficher l'image en totalité et de nécessiter qu'une seule adresse d'image, utilisée néanmoins 11 fois, ce qui en fait un montage assez lourd à charger; on pourrait diminuer le nombre de petites images... ce sera pour le prochain !

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

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