Exemple 63

1+8 images, au ration 16/9, redimensionnées par le code en 1152x648px. . Commande au survol.

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/K-eRAO0L7y8nol6zQ17KSvlkbk0@1152x648.jpg'); background-size: cover;">
<p id="dde1" class="dde">&nbsp;</p>
<p id="dde2" class="dde">&nbsp;</p>
<p id="dde3" class="dde">&nbsp;</p>
<p id="dde4" class="dde">&nbsp;</p>
<p id="dde5" class="dde">&nbsp;</p>
<p id="dde6" class="dde">&nbsp;</p>
<p id="dde7" class="dde">&nbsp;</p>
<p id="dde8" class="dde">&nbsp;</p>
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4" class="mg">&nbsp;</p>
<p id="mg5" class="mg">&nbsp;</p>
<p id="mg6" class="mg">&nbsp;</p>
<p id="mg7" class="mg">&nbsp;</p>
<p id="mg8" class="mg">&nbsp;</p>
</div>
<style><!--
.dde{position:absolute; z-index:5; width:1.5vw; height:1.5vw; border-radius:50%; box-shadow:inset -0.4vh -0.4vh 0.6vh black; background-aqua;}
#dde1{transform:translate(55vw,2vw);}
#dde2{transform:translate(55vw,5vw);}
#dde3{transform:translate(55vw,8vw);}
#dde4{transform:translate(55vw,11vw);}
#dde5{transform:translate(55vw,14vw);}
#dde6{transform:translate(55vw,17vw);}
#dde7{transform:translate(55vw,20vw);}
#dde8{transform:translate(55vw,23vw);}
.mg{position:absolute; z-index:1; width:0vw; height:0vw;transform:translate(30vw,17vw); background-size:60vw 33.75vw; transition:all 1s linear;}
#mg1{background:url('http://ekladata.com/SatbzMadANsvTeo61KfhDiRTcCk@1152x648.jpg'); background-position:-30vw -17vw;}
#mg2{background:url('http://ekladata.com/h3Rozav52EOs4vF8VXogyQXvzbc@1152x648.jpg'); background-position:-30vw -17vw;}
#mg3{background:url('http://ekladata.com/obZf2C4NYwPs1gd5INOsKbQbkaI@1152x648.jpg'); background-position:-30vw -17vw;}
#mg4{background:url('http://ekladata.com/E0v89jNRu1_e-aS7QY7_UsHU-tU@1152x648.jpg'); background-position:-30vw -17vw;}
#mg5{background:url('http://ekladata.com/55yaw-KvHjDdME2PMvpjaw1jeSE@1152x648.jpg'); background-position:-30vw -17vw;}
#mg6{background:url('http://ekladata.com/95XR94VEgPYq8L1x1B1Osq-pW8Y@1152x648.jpg'); background-position:-30vw -17vw;}
#mg7{background:url('http://ekladata.com/l_nXJO7OJgeKqwK5PbBdLCgrIxo@1152x648.jpg'); background-position:-30vw -17vw;}
#mg8{background:url('http://ekladata.com/1HrngiN2pxlwaOH7N2fLbKVjzEQ@1152x648.jpg'); background-position:-30vw -17vw;}
#dde1:hover ~ #mg1,#dde2:hover ~ #mg2,#dde3:hover ~ #mg3,#dde4:hover ~ #mg4,#dde5:hover ~ #mg5,#dde6:hover ~ #mg6,#dde7:hover ~ #mg7,#dde8:hover ~ #mg8{z-index:3; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
--></style>