-
Abîme.22.01.24
1 image en 800x600px.
<div id="g0" class="gen">
<p id="g"><a style="margin: 0 10px 0 10px; font-size: 30px; color: white; text-shadow: 1px 1px black;">SURVOL</a></p>
<p id="g1" class="gen"> </p>
<p id="g2" class="gen"> </p>
<p id="g3" class="gen"> </p>
<p id="g4" class="gen"> </p>
<p id="g5" class="gen"> </p>
<p id="g6" class="gen"> </p>
<p id="g7" class="gen"> </p>
<p id="g8" class="gen"> </p>
<p id="g9" class="gen"> </p>
</div>
<style><!--
.gen{background: url('http://ekladata.com/_HmylnKujtz7nxNkPKuib9oEUiQ.jpg'); background-size: cover; width:800px; height:600px; border:3px solid white; text-align:left;}
#g0{position:relative; width:806px; height:606px; box-shadow:4px 4px 8px black; margin:30px auto;}
#g{position:absolute; z-index:20; transform:translate(0px,0px);width:800px; height:600px; }
#g1{position:absolute; z-index:1; transition:all 2s linear; transform:translate(0px,0px);}
#g2{position:absolute; z-index:2; transition:all 2s linear; transform:translate(0px,0px);}
#g3{position:absolute; z-index:3; transition:all 2s linear; transform:translate(0px,0px);}
#g4{position:absolute; z-index:4; transition:all 2s linear; transform:translate(0px,0px);}
#g5{position:absolute; z-index:5; transition:all 2s linear; transform:translate(0px,0px);}
#g6{position:absolute; z-index:6; transition:all 2s linear; transform:translate(0px,0px);}
#g7{position:absolute; z-index:7; transition:all 2s linear; transform:translate(0px,0px);}
#g8{position:absolute; z-index:8; transition:all 2s linear; transform:translate(0px,0px);}
#g9{position:absolute; z-index:9; transition:all 2s linear; transform:translate(0px,0px);}
#g10{position:absolute; z-index:10; transition:all 2s linear; transform:translate(0px,0px);}
#g:hover ~ #g1{width:720px; height:540px; transform:translate(40px,30px);}
#g:hover ~ #g2{width:640px; height:480px; transform:translate(80px,60px);}
#g:hover ~ #g3{width:560px; height:420px; transform:translate(120px,90px);}
#g:hover ~ #g4{width:480px; height:360px; transform:translate(160px,120px);}
#g:hover ~ #g5{width:400px; height:300px; transform:translate(200px,150px);}
#g:hover ~ #g6{width:320px; height:240px; transform:translate(240px,180px);}
#g:hover ~ #g7{width:240px; height:180px; transform:translate(280px,210px);}
#g:hover ~ #g8{width:160px; height:120px; transform:translate(320px,240px);}
#g:hover ~ #g9{width:80px; height:60px; transform:translate(360px,270px);}
#g:hover ~ #g10{width:30px; height:20px; transform:translate(385px,290px);}
--></style>