23.04.2024a

Un montage simple en 1000x563px (16/9) pour 5 images horizontales... modifiable en d'autres dimensions et nombre d'images.

<div style="width: 1000px; height: 563px; margin: 50px auto; text-align: left;">
<p id="sv">SURVOL</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>
</div>

<style><!--
#sv{position:absolute; z-index:1; width:140px; transform:translate(430px,20px); font-size:30px; color:white; text-shadow:2px 2px black;}
.mg{position:absolute; z-index:1; width:200px; height:350px; border:6px solid white; box-shadow:0px 4px 6px black; transition:all 1s;}
#mg1{box-sizing:border-box; background:url('http://ekladata.com/jd_oYjUYptVbkdxuEbN2IIcj29g.jpg'); background-size:1000px 563px; background-position:0px -100px;transform:translate(0px,100px) skewy(20deg);}
#mg2{box-sizing:border-box; background:url('http://ekladata.com/O-nstxJhhdDMQGVXh9IaikLgVZg.jpg'); background-size:1000px 563px; background-position:-200px -100px; transform:translate(200px,100px) skewy(-20deg);}
#mg3{box-sizing:border-box; background:url('http://ekladata.com/cshZW2c8rFxVoYneosYpg71MG-w.jpg'); background-size:1000px 563px;background-position:-400px -100px; transform:translate(400px,100px) skewy(20deg);}
#mg4{box-sizing:border-box; background:url('http://ekladata.com/JRe0cXgCtKS7MzT_iB02NKnZo2Y.jpg'); background-size:1000px 563px; background-position:-600px -100px; transform:translate(600px,100px) skewy(-20deg)}
#mg5{box-sizing:border-box; background:url('http://ekladata.com/rmVFsEpWh7yv4hEKtxBZv6o-_ew.jpg'); background-size:1000px 563px; background-position:-800px -100px; transform:translate(800px,100px) skewy(20deg)}
#mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover{z-index:5; width:1000px; height:563px; background-position:0px 0px; transform:translate(0px,0px) skewy(0deg);}
--></style>