Mont.5.5.23

Toujours le même principe avec 8 vignettes à survoler;  9 images au ratio 16/9 en 1100x619px.

<div style="position: relative; overflow: hidden; width: 1100px; height: 619px; margin: 30px auto; border: 4px ridge white; box-shadow:4px 4px 8px black; background: url('http://ekladata.com/24tkY8g_vvyevVYFfkvCpo8PB4Y.jpg'); background-size: cover;">
<p id="cd0">&nbsp;</p>
<p id="cd1" class="cd">&nbsp;</p>
<p id="cd2" class="cd">&nbsp;</p>
<p id="cd3" class="cd">&nbsp;</p>
<p id="cd4" class="cd">&nbsp;</p>
<p id="cd5" class="cd">&nbsp;</p>
<p id="cd6" class="cd">&nbsp;</p>
<p id="cd7" class="cd">&nbsp;</p>
<p id="cd8" class="cd">&nbsp;</p>
</div>

<style><!--
#cd0{position:absolute; z-index:1; width:30px; height:619px; background:rgba(0,0,0,0.5); transform:translate(1070px,0px);}
.cd{position:absolute; z-index:1; width:50px; height:50px; border:2px solid white; border-radius:50%; transition:all 1.5s;}
#cd1{background:url('http://ekladata.com/tTpz1gQ21rMjJHyA6103Sb2w2Qs.jpg'); background-size:1100px 619px; background-position:-1075px -50px; transform:translate(1075px,50px);}
#cd2{background:url('http://ekladata.com/rxlmSXy_1FLqb1UGwB2E-kwLqsw.jpg'); background-size:1100px 619px; background-position:-1075px -120px; transform:translate(1075px,120px);}
#cd3{background:url('http://ekladata.com/qSnG6npOirVlQGKMI4cUJTorhto.jpg'); background-size:1100px 619px; background-position:-1075px -190px; transform:translate(1075px,190px);}
#cd4{background:url('http://ekladata.com/U1-bH2mcJrOyzJFdKXUGdF_MC3o.jpg'); background-size:1100px 619px; background-position:-1075px -260px; transform:translate(1075px,260px);}
#cd5{background:url('http://ekladata.com/UWEhxAI7SFGXhDU0KhPuKCJMqVE.jpg'); background-size:1100px 619px; background-position:-1075px -330px; transform:translate(1075px,330px);}
#cd6{background:url('http://ekladata.com/fPgAi2EDQN4SCrzOGKV2-9TphKE.jpg'); background-size:1100px 619px; background-position:-1075px -400px; transform:translate(1075px,400px);}
#cd7{background:url('http://ekladata.com/Jj89YPXeZDDa7tpP8CxxknZT_Bo.jpg'); background-size:1100px 619px; background-position:-1075px -470px; transform:translate(1075px,470px);}
#cd8{background:url('http://ekladata.com/Glkgbindnlsl3WNi_Goml5treGM.jpg'); background-size:1100px 619px; background-position:-1075px -540px; transform:translate(1075px,540px);}
#cd1:hover,#cd2:hover,#cd3:hover,#cd4:hover,#cd5:hover,#cd6:hover,#cd7:hover,#cd8:hover{z-index:5; width:1100px; height:619px; border:none; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px);}
--></style>