Modèle en 60vw/33.75vw A

Je vous propose un modèle simple de montage pour 9 images à survoler en 60vw/33.75vw, c'est à dire 60% de la largeur de votre écran, au ratio largeur/hauteur de 16/9.

J'ai choisi une couleur de fond en dégradé mais je vous proposerai, dans la page suivante, la façon de la personnaliser.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 2vh auto; background: linear-gradient(to bottom,rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);">
<p id="alp1" class="alp">&nbsp;</p>
<p id="alp2" class="alp">&nbsp;</p>
<p id="alp3" class="alp">&nbsp;</p>
<p id="alp4" class="alp">&nbsp;</p>
<p id="alp5" class="alp">&nbsp;</p>
<p id="alp6" class="alp">&nbsp;</p>
<p id="alp7" class="alp">&nbsp;</p>
<p id="alp8" class="alp">&nbsp;</p>
<p id="alp9" class="alp">&nbsp;</p>
</div>
<hr style="border:0.3vh dashed black;">
<p style="text-align: center; font-size: 1vw;">...</p>
<hr style="border:0.3vh dashed black;">
<p style="text-align: center;">...</p>
<style><!--
.alp{position:absolute; z-index:1; width:16vw; height:9vw; border:0.3vh solid white; transition:all 1s linear;}
#alp1{background:url('http://ekladata.com/dUfGlLA73Kryz7g3UOfPtcerBwI.jpg'); background-size:16vw 9vw; transform:translate(3vw,1.5vw);}
#alp2{background:url('http://ekladata.com/4Wud8wJZyIdl_yoOti2nlh0yUEo.jpg'); background-size:16vw 9vw; transform:translate(22vw,1.5vw);}
#alp3{background:url('http://ekladata.com/lZM1i0pUvLCpELJ_R8k0uLKc8xo.jpg'); background-size:16vw 9vw; transform:translate(41vw,1.5vw);}
#alp4{background:url('http://ekladata.com/sEEYrrMB6uQN--ihLh0drLHG1iU.jpg'); background-size:16vw 9vw; transform:translate(3vw,12.5vw);}
#alp5{background:url('http://ekladata.com/fskkRcVtmKsxJ3oLzHaKsuQM27c.jpg'); background-size:16vw 9vw; transform:translate(22vw,12.5vw);}
#alp6{background:url('http://ekladata.com/WgABIUMG6FpweZ8cLE0QiBkCDiM.jpg'); background-size:16vw 9vw; transform:translate(41vw,12.5vw);}
#alp7{background:url('http://ekladata.com/UkaAvzeUDJvtw6TkO-ooIgxACDs.jpg'); background-size:16vw 9vw; transform:translate(3vw,23.5vw);}
#alp8{background:url('http://ekladata.com/3BrTte28SRWkRWkAePlhJkjioLo.jpg'); background-size:16vw 9vw; transform:translate(22vw,23.5vw);}
#alp9{background:url('http://ekladata.com/AXpOOwmlkXxkKehNynCGBy78oqI.jpg'); background-size:16vw 9vw; transform:translate(41vw,23.5vw);}
#alp1:hover,#alp2:hover,#alp3:hover,#alp4:hover,#alp5:hover,#alp6:hover,#alp7:hover,#alp8:hover,#alp9:hover{z-index:5; width:60vw; height:33.75vw;  border:none; background-size:60vw 33.75vw; transform:translate(0vw,0vw);}
--></style>

Remplacez mes adresses images en bleu par les vôtres, de préférence au ratio 16/9 pour ne pas les déformer.

Dans la page suivante, je ne reprendrai que le cadre avec sa couleur de fond pour que vous le personnalisiez.