23.04.2024

 1+5 images dans un montage en 1000x563px (16/9), modifiable en dimensions et en nombre d'images (horizontales ou/et verticales).

L'animation des vignettes oblige à placer, au-dessus, des boutons invisibles (bt) qui eux, restent fixes.

<div style="width: 1000px; height: 563px; margin: 50px auto; text-align: left; border: 2px solid black;">
<p id="fd">&nbsp;</p>
<p id="bt1" class="bt">&nbsp;</p>
<p id="bt2" class="bt">&nbsp;</p>
<p id="bt3" class="bt">&nbsp;</p>
<p id="bt4" class="bt">&nbsp;</p>
<p id="bt5" class="bt">&nbsp;</p>
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4" class="mg">&nbsp;</p>
<p id="mg5" class="mg">&nbsp;</p>
<p id="sv">SURVOL</p>
</div>

<style><!--
#fd{position:absolute; z-index:1; width:1000px; height:563px; background:url('http://ekladata.com/q_BBEtHWgX0I7XLaBzAHLLqYHmk.jpg'); background-size:cover; filter:grayscale(0); opacity:0.8;}
#sv{position:absolute; z-index:1; width:140px; transform:translate(430px,20px); font-size:30px; color:white; text-shadow:2px 2px black;}
.bt{position:absolute; z-index:10; width:240px; height:135px;}
#bt1{transform:translate(50px,40px);}
#bt2{transform:translate(710px,40px);}
#bt3{transform:translate(380px,215px);}
#bt4{transform:translate(50px,390px);}
#bt5{transform:translate(710px,390px);}
.mg{position:absolute; z-index:1; width:240px; height:135px; border:6px solid white; box-shadow:-4px 4px 6px black; transition:all 2s;}
#mg1{box-sizing:border-box; background:url('http://ekladata.com/jd_oYjUYptVbkdxuEbN2IIcj29g.jpg'); background-size:cover; transform:translate(50px,40px) rotatey(180deg);}
#mg2{box-sizing:border-box; background:url('http://ekladata.com/O-nstxJhhdDMQGVXh9IaikLgVZg.jpg'); background-size:cover; transform:translate(710px,40px) rotatey(180deg);}
#mg3{box-sizing:border-box; background:url('http://ekladata.com/cshZW2c8rFxVoYneosYpg71MG-w.jpg'); background-size:cover; transform:translate(380px,215px) rotatey(180deg);}
#mg4{box-sizing:border-box; background:url('http://ekladata.com/JRe0cXgCtKS7MzT_iB02NKnZo2Y.jpg'); background-size:cover; transform:translate(50px,390px) rotatey(180deg);}
#mg5{box-sizing:border-box; background:url('http://ekladata.com/rmVFsEpWh7yv4hEKtxBZv6o-_ew.jpg'); background-size:cover; transform:translate(710px,390px) rotatey(180deg);}
#bt1:hover~#mg1,#bt2:hover~#mg2,#bt3:hover~#mg3,#bt4:hover~#mg4,#bt5:hover~#mg5{z-index:5; width:1000px; height:563px; box-shadow:none; transform:translate(0px,0px) rotatey(0deg);}
--></style>