22.04.2024

 6 images dans un montage de 1000x563px (16/9).

<div style="width:1000px; height:563px; margin:50px auto; text-align:left; ">
<p id="sv">SURVOL ronds colorés.</p>
<p id="rd1a" class="a1">&nbsp;</p>
<p id="rd2a" class="a1">&nbsp;</p>
<p id="rd3a" class="a1">&nbsp;</p>
<p id="rd1b" class="a2">&nbsp;</p>
<p id="rd2b" class="a2">&nbsp;</p>
<p id="rd3b" class="a2">&nbsp;</p>
<p id="rd1c" class="a3">&nbsp;</p>
<p id="rd2c" class="a3">&nbsp;</p>
<p id="rd3c" class="a3">&nbsp;</p>
<p id="rd1d" class="a4">&nbsp;</p>
<p id="rd2d" class="a4">&nbsp;</p>
<p id="rd3d" class="a4">&nbsp;</p>
<p id="rd1e" class="a5">&nbsp;</p>
<p id="rd2e" class="a5">&nbsp;</p>
<p id="rd3e" class="a5">&nbsp;</p>
<p id="rd1f" class="a6">&nbsp;</p>
<p id="rd2f" class="a6">&nbsp;</p>
<p id="rd3f" class="a6">&nbsp;</p>
</div>
<style><!--
#sv{position:absolute; z-index:1; width:350px; transform:translate(350px,10px); font-size:25px;}
.a1{position:absolute; z-index:1; width:120px; height:120px; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:url('http://ekladata.com/GDtDGPQ6gbM5FqcBiRGltWVk0Zk.jpg'); background-size:1000px 563px; border-radius:50%;}
#rd1a{background-position:-40px -60px; transform:translate(40px,60px);}
#rd2a{background-position:-40px -230px; transform:translate(40px,230px); filter:grayscale(1);}
#rd3a{background-position:-40px -400px; transform:translate(40px,400px); filter:grayscale(1);}
.a2{position:absolute; z-index:1; width:120px; height:120px; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:url('http://ekladata.com/DCqUqr9sVwAz9ulx5OhSnkzWg-U.jpg'); background-size:1000px 563px; border-radius:50%;}
#rd1b{background-position:-200px -60px; transform:translate(200px,60px);}
#rd2b{background-position:-200px -230px; transform:translate(200px,230px); filter:grayscale(1);}
#rd3b{background-position:-200px -400px; transform:translate(200px,400px); filter:grayscale(1);}
.a3{position:absolute; z-index:1; width:120px; height:120px; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:url('http://ekladata.com/VAHh3WJ8YkJbKKRl1sflLZhvrQY.jpg'); background-size:1000px 563px; border-radius:50%;}
#rd1c{background-position:-360px -60px; transform:translate(360px,60px);}
#rd2c{background-position:-360px -230px; transform:translate(360px,230px); filter:grayscale(1);}
#rd3c{background-position:-360px -400px; transform:translate(360px,400px); filter:grayscale(1);}
.a4{position:absolute; z-index:1; width:120px; height:120px; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:url('http://ekladata.com/hKI1lquto-j9KkKwUvrTV47sCFU.jpg'); background-size:1000px 563px; border-radius:50%;}
#rd1d{background-position:-520px -60px; transform:translate(520px,60px);}
#rd2d{background-position:-520px -230px; transform:translate(520px,230px); filter:grayscale(1);}
#rd3d{background-position:-520px -400px; transform:translate(520px,400px); filter:grayscale(1);}
.a5{position:absolute; z-index:1; width:120px; height:120px; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:url('http://ekladata.com/jA4vCi3mMMYdYKpWZSNL7iet9HU.jpg'); background-size:1000px 563px; border-radius:50%;}
#rd1e{background-position:-680px -60px; transform:translate(680px,60px);}
#rd2e{background-position:-680px -230px; transform:translate(680px,230px); filter:grayscale(1);}
#rd3e{background-position:-680px -400px; transform:translate(680px,400px); filter:grayscale(1);}
.a6{position:absolute; z-index:1; width:120px; height:120px; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:url('http://ekladata.com/2ULzljMoaehHCFvDDUYE6nAgY5o.jpg'); background-size:1000px 563px; border-radius:50%;}
#rd1f{background-position:-840px -60px; transform:translate(840px,60px);}
#rd2f{background-position:-840px -230px; transform:translate(840px,230px); filter:grayscale(1);}
#rd3f{background-position:-840px -400px; transform:translate(840px,400px); filter:grayscale(1);}

#rd1a:hover,#rd1b:hover,#rd1c:hover,#rd1d:hover,#rd1e:hover,#rd1f:hover{z-index:5; width:1000px; height:205px; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px); box-shadow:none; transition:all 1s;}
#rd1a:hover~#rd2a,#rd1b:hover~#rd2b,#rd1c:hover~#rd2c,#rd1d:hover~#rd2d,#rd1e:hover~#rd2e,#rd1f:hover~#rd2f{z-index:5; width:1000px; height:205px; border-radius:0%; background-position:0px -205px; transform:translate(0px,205px); box-shadow:none; filter:grayscale(0); transition:all 1s 0.2s, filter 1s 0.2s;}
#rd1a:hover~#rd3a,#rd1b:hover~#rd3b,#rd1c:hover~#rd3c,#rd1d:hover~#rd3d,#rd1e:hover~#rd3e,#rd1f:hover~#rd3f{z-index:5; width:1000px; height:188px; border-radius:0%; background-position:0px -370px; transform:translate(0px,370px); box-shadow:none; filter:grayscale(0); transition:all 1s 0.4s, filter 1s 0.4s;}
--></style>