13.04.2024

Montage en 800x600px pour 5 images. 

Je laisse le code bien long pour qu'il reste compréhensible; il y aurait sans doute moyen de le réduire mais ce serait plus compliqué à lire et à modifier.

<div style="width: 800px; height: 600px; margin: 50px auto; text-align: left; border: 6px ridge grey; box-shadow: 4px 4px 8px black; background:white;">
<p id="sv">SURVOL</p>
<p id="cent1" class="cent">&nbsp;</p>
<p id="gauche1" class="aile">&nbsp;</p>
<p id="droite1" class="aile">&nbsp;</p>
<p id="cent2" class="cent">&nbsp;</p>
<p id="gauche2" class="aile">&nbsp;</p>
<p id="droite2" class="aile">&nbsp;</p>
<p id="cent3" class="cent">&nbsp;</p>
<p id="gauche3" class="aile">&nbsp;</p>
<p id="droite3" class="aile">&nbsp;</p>
<p id="cent4" class="cent">&nbsp;</p>
<p id="gauche4" class="aile">&nbsp;</p>
<p id="droite4" class="aile">&nbsp;</p>
<p id="cent5" class="cent">&nbsp;</p>
<p id="gauche5" class="aile">&nbsp;</p>
<p id="droite5" class="aile">&nbsp;</p>
</div>
<style><!--
#sv{position:absolute; width:120px; font-size:25px; transform:translate(340px,10px);}
.cent{position:absolute; width:300px; height:80px; transition:all 1s 0s;}
.aile{position:absolute; width:250px; height:600px; transition:all 1s 1s;}
#cent1{background:url('http://ekladata.com/s2FEfMJvIksdBwSDA2UNQMFMeB4.jpg'); background-size:800px 600px; background-position:-250px -50px; transform:translate(250px,50px);}
#gauche1{background:url('http://ekladata.com/s2FEfMJvIksdBwSDA2UNQMFMeB4.jpg'); background-size:800px 600px; background-position:0px 0px; transform-origin:center right; transform:translate(0px,0px) perspective(200px) rotatey(-90deg);}
#droite1{background:url('http://ekladata.com/s2FEfMJvIksdBwSDA2UNQMFMeB4.jpg'); background-size:800px 600px; background-position:-550px 0px; transform-origin:center left; transform:translate(550px,0px) perspective(200px) rotatey(90deg);}

#cent2{background:url('http://ekladata.com/VP1uuKb9WNuBXQPfqSaxcYPEo7Q.jpg'); background-size:800px 600px; background-position:-250px -160px; transform:translate(250px,160px);}
#gauche2{background:url('http://ekladata.com/VP1uuKb9WNuBXQPfqSaxcYPEo7Q.jpg'); background-size:800px 600px; background-position:0px 0px; transform-origin:center right; transform:translate(0px,0px) perspective(200px) rotatey(-90deg);}
#droite2{background:url('http://ekladata.com/VP1uuKb9WNuBXQPfqSaxcYPEo7Q.jpg'); background-size:800px 600px; background-position:-550px 0px; transform-origin:center left; transform:translate(550px,0px) perspective(200px) rotatey(90deg);}

#cent3{background:url('http://ekladata.com/jn_nHjJKt4jkcVm1aIE9MdCoy9w.jpg'); background-size:800px 600px; background-position:-250px -270px; transform:translate(250px,270px);}
#gauche3{background:url('http://ekladata.com/jn_nHjJKt4jkcVm1aIE9MdCoy9w.jpg'); background-size:800px 600px; background-position:0px 0px; transform-origin:center right; transform:translate(0px,0px) perspective(200px) rotatey(-90deg);}
#droite3{background:url('http://ekladata.com/jn_nHjJKt4jkcVm1aIE9MdCoy9w.jpg'); background-size:800px 600px; background-position:-550px 0px; transform-origin:center left; transform:translate(550px,0px) perspective(200px) rotatey(90deg);}

#cent4{background:url('http://ekladata.com/Y8uqzce0TY3xaQETFOhk-X5pZLU.jpg'); background-size:800px 600px; background-position:-250px -380px; transform:translate(250px,380px);}
#gauche4{background:url('http://ekladata.com/Y8uqzce0TY3xaQETFOhk-X5pZLU.jpg'); background-size:800px 600px; background-position:0px 0px; transform-origin:center right; transform:translate(0px,0px) perspective(200px) rotatey(-90deg);}
#droite4{background:url('http://ekladata.com/Y8uqzce0TY3xaQETFOhk-X5pZLU.jpg'); background-size:800px 600px; background-position:-550px 0px; transform-origin:center left; transform:translate(550px,0px) perspective(200px) rotatey(90deg);}

#cent5{background:url('http://ekladata.com/4JwEyKC_iRBydYXTshA1nwQN2A4.jpg'); background-size:800px 600px; background-position:-250px -490px; transform:translate(250px,490px);}
#gauche5{background:url('http://ekladata.com/4JwEyKC_iRBydYXTshA1nwQN2A4.jpg'); background-size:800px 600px; background-position:0px 0px; transform-origin:center right; transform:translate(0px,0px) perspective(200px) rotatey(-90deg);}
#droite5{background:url('http://ekladata.com/4JwEyKC_iRBydYXTshA1nwQN2A4.jpg'); background-size:800px 600px; background-position:-550px 0px; transform-origin:center left; transform:translate(550px,0px) perspective(200px) rotatey(90deg);}

#cent1:hover,#cent2:hover,#cent3:hover,#cent4:hover,#cent5:hover{z-index:5; height:600px; background-position:-250px 0px; transform:translate(250px,0px) perspective(2000px) rotatey(0deg);}
#cent1:hover ~ #gauche1,#cent2:hover ~ #gauche2,#cent3:hover ~ #gauche3,#cent4:hover ~ #gauche4,#cent5:hover ~ #gauche5{transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
#cent1:hover ~ #droite1,#cent2:hover ~ #droite2,#cent3:hover ~ #droite3,#cent4:hover ~ #droite4,#cent5:hover ~ #droite5{transform:translate(550px,0px)perspective(2000px) rotatey(0deg);}
--></style>