15a.04.2024

Variante du code précédent pour 6 images dans un montage en 800x600px, modifiable. 

<div style="width: 800px; height: 600px; margin: 50px auto; text-align: left; border: 6px ridge grey; background: white;">
<p id="sv">SURVOL</p>
<p id="essa1" class="rg">&nbsp;</p>
<p id="essa2" class="rd">&nbsp;</p>
<p id="essb1" class="rg">&nbsp;</p>
<p id="essb2" class="rd">&nbsp;</p>
<p id="essc1" class="rg">&nbsp;</p>
<p id="essc2" class="rd">&nbsp;</p>
<p id="essd1" class="rg">&nbsp;</p>
<p id="essd2" class="rd">&nbsp;</p>
<p id="esse1" class="rg">&nbsp;</p>
<p id="esse2" class="rd">&nbsp;</p>
<p id="essf1" class="rg">&nbsp;</p>
<p id="essf2" class="rd">&nbsp;</p>
</div>
<style><!--
#sv{position:absolute; z-index:1; width:120px; font-size:25px; transform:translate(150px,10px);}
.rg{position:absolute; z-index:1; width:140px; height:80px; border-radius:30px; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px white; transition:all 1s;}
.rd{position:absolute; z-index:1; width:400px; height:600px; transform-origin: center left; transform:translate(400px, 0px) perspective(200px) rotatey(90deg);transition:all 1s 1s;}
#essa1{background:url('http://ekladata.com/zol65N67VvZ9eVT_hRCrA1VNFCU.jpg'); background-size:800px 600px; background-position:-40px -60px; transform:translate(40px, 60px);}
#essa2{background:url('http://ekladata.com/zol65N67VvZ9eVT_hRCrA1VNFCU.jpg'); background-size:800px 600px; background-position:-400px 0px;}
#essb1{background:url('http://ekladata.com/Crt6CTPGeWtyVQqQKDj6kQ2AThg.jpg'); background-size:800px 600px; background-position:-210px -60px; transform:translate(210px, 60px);}
#essb2{background:url('http://ekladata.com/Crt6CTPGeWtyVQqQKDj6kQ2AThg.jpg'); background-size:800px 600px; background-position:-400px 0px;}
#essc1{background:url('http://ekladata.com/Cg3N-nl7RR50jvj31Md7xvZiR2c.jpg'); background-size:800px 600px; background-position:-40px -240px; transform:translate(40px, 240px);}
#essc2{background:url('http://ekladata.com/Cg3N-nl7RR50jvj31Md7xvZiR2c.jpg'); background-size:800px 600px; background-position:-400px 0px;}
#essd1{background:url('http://ekladata.com/3UvcWEclJaxXeO86i1ph9m6CmG0.jpg'); background-size:800px 600px; background-position:-210px -240px; transform:translate(210px, 240px);}
#essd2{background:url('http://ekladata.com/3UvcWEclJaxXeO86i1ph9m6CmG0.jpg'); background-size:800px 600px; background-position:-400px 0px;}
#esse1{background:url('http://ekladata.com/I4qeWnFOvS6HvJNrRXNwTXSFhKs.jpg'); background-size:800px 600px; background-position:-40px -420px; transform:translate(40px, 420px);}
#esse2{background:url('http://ekladata.com/I4qeWnFOvS6HvJNrRXNwTXSFhKs.jpg'); background-size:800px 600px; background-position:-400px 0px;}
#essf1{background:url('http://ekladata.com/P61XEmPGtxM6UTeH7WLKtzIEVsk.jpg'); background-size:800px 600px; background-position:-210px -420px; transform:translate(210px, 420px);}
#essf2{background:url('http://ekladata.com/P61XEmPGtxM6UTeH7WLKtzIEVsk.jpg'); background-size:800px 600px; background-position:-400px 0px;}
#essa1:hover, #essb1:hover, #essc1:hover,#essd1:hover, #esse1:hover, #essf1:hover{z-index:5; width:400px; height:600px; border-radius:0%; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px);}
#essa1:hover ~ #essa2,#essb1:hover ~ #essb2,#essc1:hover ~ #essc2,#essd1:hover ~ #essd2,#esse1:hover ~ #esse2,#essf1:hover ~ #essf2{z-index:5; width:400px; height:600px; transform:translate(400px,0px) perspective(2000px) rotatey(0deg);}
--></style>