17a.04.2024

Survol des parties colorées de ce montage en 1000x563px (ratio 16/9), pour 6 images.

On pourrait mélanger les images couleur/noir et blanc mais sans oublier que le programme doit d'abord trouver

une adresse afin de pouvoir animer une image qui suit et non l'inverse (je me suis fait piéger !)

<div style="width: 1000px; height: 563px; margin: 50px auto; text-align: left; background: white; border: 6px solid white; box-shadow: 4px 4px 8px black;">
<p id="cad1" class="cad">&nbsp;</p>
<p id="cad2" class="cad">&nbsp;</p>
<p id="cad3" class="cad">&nbsp;</p>
<p id="cad4" class="cad">&nbsp;</p>
<p id="cad5" class="cad">&nbsp;</p>
<p id="cad6" class="cad">&nbsp;</p>
<p id="cad7" class="cad">&nbsp;</p>
<p id="cad8" class="cad">&nbsp;</p>
<p id="cad9" class="cad">&nbsp;</p>
<p id="cad10" class="cad">&nbsp;</p>
<p id="cad11" class="cad">&nbsp;</p>
<p id="cad12" class="cad">&nbsp;</p>
</div>

<style><!--
.cad{position:absolute; z-index:1; transition:all 1s;}
#cad1{ width:200px; height:150px; background:url('http://ekladata.com/VOI2GbEbeFMc6Gg-oIW6bwGIj6w.jpg'); background-size:1000px 563px; background-position:0px 0px ;transform:translate(0px,0px);}
#cad2{width:300px; height:100px; background:url('http://ekladata.com/X-N63ar5BoTU2r7D4rI1u3jgzRE.jpg'); background-size:1000px 563px; background-position:-250px 0px ; transform:translate(250px,0px);}
#cad3{width:100px; height:350px; background:url('http://ekladata.com/Xl9xX2-nQXjKV2JTIaqRuGppXFw.jpg'); background-size:1000px 563px; background-position:0px -213px ; transform:translate(0px,213px);}
#cad4{width:100px; height:150px; background:url('http://ekladata.com/JW0v454PTVx9_XxU0Tt2z_QlVfA.jpg'); background-size:1000px 563px; background-position:-150px -200px ; transform:translate(150px,200px);}
#cad5{width:150px; height:250px; background:url('http://ekladata.com/Xl9xX2-nQXjKV2JTIaqRuGppXFw.jpg'); background-size:1000px 563px; background-position:-600px 0px ; transform:translate(600px,0px); filter:grayscale(1);}
#cad6{width:200px; height:200px; background:url('http://ekladata.com/JW0v454PTVx9_XxU0Tt2z_QlVfA.jpg'); background-size:1000px 563px; background-position:-800px 0px ; transform:translate(800px,0px);filter:grayscale(1);}
#cad7{width:300px; height:150px; background:url('http://ekladata.com/iG48BlCAx6Fn23vN9eDYR1SzCWI.jpg'); background-size:1000px 563px; background-position:-150px -413px ; transform:translate(150px,413px);}
#cad8{width:250px; height:150px; background:url('http://ekladata.com/d9TVtHJop_-9hoj3NlJ6odUIaow.jpg'); background-size:1000px 563px; background-position:-300px -150px ; transform:translate(300px,150px);}
#cad9{width:150px; height:200px; background:url('http://ekladata.com/iG48BlCAx6Fn23vN9eDYR1SzCWI.jpg'); background-size:1000px 563px; background-position:-500px -363px ; transform:translate(500px,363px);filter:grayscale(1);}
#cad10{width:150px; height:100px; background:url('http://ekladata.com/X-N63ar5BoTU2r7D4rI1u3jgzRE.jpg'); background-size:1000px 563px; background-position:-700px 300px ; transform:translate(700px,300px);filter:grayscale(1);}
#cad11{width:100px; height:100px; background:url('http://ekladata.com/d9TVtHJop_-9hoj3NlJ6odUIaow.jpg'); background-size:1000px 563px; background-position:-720px -463px ; transform:translate(720px,463px);filter:grayscale(1);}
#cad12{width:100px; height:300px; background:url('http://ekladata.com/VOI2GbEbeFMc6Gg-oIW6bwGIj6w.jpg'); background-size:1000px 563px; background-position:-900px -263px ; transform:translate(900px,263px);filter:grayscale(1);}
#cad1:hover,#cad2:hover,#cad3:hover,#cad4:hover,#cad7:hover,#cad8:hover{z-index:5; width:500px; height:563px; background-position:0px 0px; transform:translate(0px,0px);}
#cad3:hover ~ #cad5,#cad4:hover ~ #cad6,#cad7:hover ~ #cad9,#cad2:hover ~ #cad10,#cad8:hover ~ #cad11,#cad1:hover ~ #cad12{z-index:5; width:500px; height:563px; background-position:-500px 0px; transform:translate(500px,0px); filter:grayscale(0);}
--></style>