Montage 51

La taille des images est adaptée par le code mais il les faut au ratio 16/9.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/9OWgCtzMqTrU55IW-3n61F2Dx0Y.jpg'); background-size: cover;">
<p id="cha0">Survol</p>
<p id="cha1" class="cha">&nbsp;</p>
<p id="cha2" class="cha">&nbsp;</p>
<p id="cha3" class="cha">&nbsp;</p>
<p id="cha4" class="cha">&nbsp;</p>
<p id="cha5" class="cha">&nbsp;</p>
<p id="cha6" class="cha">&nbsp;</p>
<p id="cha7" class="cha">&nbsp;</p>
<p id="cha8" class="cha">&nbsp;</p>
</div>

<style><!--
#cha0{position:absolute; z-index:1; width:10vw; background:rgba(0,0,0,0.5);text-align:center; line-height:2vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(25vw,1vw);}               
.cha{position:absolute; z-index:1; width:8vw; height:8vw; border:0.4vh solid white; border-radius:50%; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
#cha1{box-sizing:border-box; background:url('http://ekladata.com/dEEZ0mraimtBMSc_6SLm5ffzres.jpg'); background-size:60vw 33.75vw; background-position:-2vw -1vw; transform:translate(2vw,1vw);}
#cha2{box-sizing:border-box; background:url('http://ekladata.com/M0Db2ykMUQlJXsqw-Vulh8wDMhw.jpg'); background-size:60vw 33.75vw; background-position:-10vw -8vw; transform:translate(10vw,8vw);}
#cha3{box-sizing:border-box; background:url('http://ekladata.com/N50dPgfLD2V-WXWMpKOuyW_dzcg.jpg'); background-size:60vw 33.75vw; background-position:-2vw -15vw; transform:translate(2vw,15vw);}
#cha4{box-sizing:border-box; background:url('http://ekladata.com/Mnq_EnTKQKA7haldw85QduxItQ4.jpg'); background-size:60vw 33.75vw; background-position:-10vw -22vw; transform:translate(10vw,22vw);}
#cha5{box-sizing:border-box; background:url('http://ekladata.com/xo9wRHesa-npq-M2POtgq9f_E7w.jpg'); background-size:60vw 33.75vw; background-position:-42vw -1vw; transform:translate(42vw,1vw);}
#cha6{box-sizing:border-box; background:url('http://ekladata.com/iawBQyPjqfjOm8jHfD9griNvCpM.jpg'); background-size:60vw 33.75vw; background-position:-50vw -8vw; transform:translate(50vw,8vw);}
#cha7{box-sizing:border-box; background:url('http://ekladata.com/_I5ZjdwNYfdt2ZiyTRZrnBX4BSc.jpg'); background-size:60vw 33.75vw; background-position:-42vw -15vw; transform:translate(42vw,15vw);}
#cha8{box-sizing:border-box; background:url('http://ekladata.com/44zZDKqCUvCZIIupBpxfa542MAc.jpg'); background-size:60vw 33.75vw; background-position:-50vw -22vw; transform:translate(50vw,22vw);}

#cha1:hover,#cha2:hover,#cha3:hover,#cha4:hover,#cha5:hover,#cha6:hover,#cha7:hover,#cha8:hover{z-index:5; width:60vw; height:33.75vw; border-radius:0%; border:none; transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>