Mont.06.5.23

8 images au ratio 16/9 en 1100x619px. Mes photos quelconques ne sont là que pour l'exemple...

<div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left;">
<p id="ar0">S U R V O L</p>
<p id="ar1" class="ar">&nbsp;</p>
<p id="ar2" class="ar">&nbsp;</p>
<p id="ar3" class="ar">&nbsp;</p>
<p id="ar4" class="ar">&nbsp;</p>
<p id="ar5" class="ar">&nbsp;</p>
<p id="ar6" class="ar">&nbsp;</p>
<p id="ar7" class="ar">&nbsp;</p>
<p id="ar8" class="ar">&nbsp;</p>
</div>

<style><!--
#ar0{position:absolute;z-index:1; width:40px; height:300px; text-align:center; font-size:30px; transform:translate(530px,180px);}
.ar{position:absolute; border:4px solid white; transition:all 1s;}
#ar1{z-index:10; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/_KcCi6ymxSO2NzKxP_EtSO8mwF8.jpg'); background-size:1100px 619px; background-position:0px 0px; border-radius:0 50% 50% 0; transform:translate(0px,0px);}
#ar2{z-index:9; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/5jwAGj5ccnBVTHNmSSzw9BtdKTE.jpg'); background-size:1100px 619px; background-position:-100px 0px; border-radius:0 50% 50% 0; transform:translate(100px,0px);}
#ar3{z-index:8; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/krGbbnnuuoqfIAVp20JxEaa-oK0.jpg'); background-size:1100px 619px; background-position:-200px 0px; border-radius:0 50% 50% 0; transform:translate(200px,0px);}
#ar4{z-index:7; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/GpyXcK5g6GatZcKV4JZW9kjpRhQ.jpg'); background-size:1100px 619px; background-position:-300px 0px; border-radius:0 50% 50% 0; transform:translate(300px,0px);}
#ar5{z-index:10; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/2mO2Shy8-8pDY149a6j91Wc_RgU.jpg'); background-size:1100px 619px; background-position:-900px 0px; border-radius:50% 0 0 50%; transform:translate(900px,0px);}
#ar6{z-index:9; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/QibYt0ayvItvChCKKJqvflNuxTA.jpg'); background-size:1100px 619px; background-position:-800px 0px; border-radius:50% 0 0 50%; transform:translate(800px,0px);}
#ar7{z-index:8; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/wbh6zhcm4CL_cu_hfD7MZhAAUY0.jpg'); background-size:1100px 619px; background-position:-700px 0px; border-radius:50% 0 0 50%; transform:translate(700px,0px);}
#ar8{z-index:7; box-sizing: border-box; width:200px; height:619px; background:url('http://ekladata.com/Q98LJrOXfXyj6cbw82IJbyIzXic.jpg'); background-size:1100px 619px; background-position:-600px 0px; border-radius:50% 0 0 50%; transform:translate(600px,0px);}
#ar1:hover,#ar2:hover,#ar3:hover,#ar4:hover,#ar5:hover,#ar6:hover,#ar7:hover,#ar8:hover{z-index:15; width:1100px; border-radius:0px; background-position:0px 0px; transform:translate(0px,0px);}
--></style>