15.04.2024

 6 images dans un montage de 800x600px.

<div style="width: 800px; height: 600px; margin: 50px auto; text-align: left; border: 4px 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:140px; border-radius:50%; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px white; transition:all 1s;}
.rd{position:absolute; z-index:1; width:140px; height:140px; border-radius:50%; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6px white; filter:grayscale(1); opacity:0.5; transition:all 1s 0.5s;}
#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:-440px -60px; transform:translate(440px, 60px);}
#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:-610px -60px; transform:translate(610px, 60px);}
#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:-440px -240px; transform:translate(440px, 240px);}
#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:-610px -240px; transform:translate(610px, 240px);}
#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:-440px -420px; transform:translate(440px, 420px);}
#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:-610px -420px; transform:translate(610px, 420px);}
#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; border-radius:0%; box-shadow:none; background-position:-400px 0px; filter:grayscale(0); opacity:1; transform:translate(400px,0px);}
--></style>