ArtA.7.4.21

7 images au ratio 16/9.

<div style="width:80vw; height:45vw; margin:1vh auto; text-align:left; border:0.4vh ridge grey; background:url('http://ekladata.com/VBJckYFtkLbMw9EaquMsvYWOc7w.jpg'); background-size:80vw 45vw;">
<p id="fd0">Survol</p>
<p id="fd1" class="fd">&nbsp;</p>
<p id="fd2" class="fd">&nbsp;</p>
<p id="fd3" class="fd">&nbsp;</p>
<p id="fd4" class="fd">&nbsp;</p>
<p id="fd5" class="fd">&nbsp;</p>
<p id="fd6" class="fd">&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>
</div>

<style><!--
#fd0{position:absolute; z-index:1; width:40vw; height:3vw; background:rgba(0,0,0,0.4); line-height:3vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(20vw,42vw); border-radius:1.5vw 1.5vw 0 0;}
.fd{position:absolute; z-index:5; width:1.5vw; height:1.5vw; border-radius:50%; background:lime; box-shadow:inset -0.2vh -0.2vh 0.4vh black; padding:0 0 0 1vw;}
#fd1{transform:translate(30vw,43vw);}
#fd2{transform:translate(35vw,43vw);}
#fd3{transform:translate(40vw,43vw);}
#fd4{transform:translate(45vw,43vw);}
#fd5{transform:translate(50vw,43vw);}
#fd6{transform:translate(55vw,43vw);}
.mg{position:absolute; z-index:1; width:0vw; height:0vw; transition:all 1s linear;}
#mg1{background:url('http://ekladata.com/-Y_xYYiv0TpxVMt0h5vyrHRevJ0.jpg'); background-size:80vw 45vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#mg2{background:url('http://ekladata.com/VyUQ3bk2miDcm0upIxTWdYjBylk.jpg'); background-size:80vw 45vw; background-position:-40vw 0vw; transform:translate(40vw,0vw);}
#mg3{background:url('http://ekladata.com/V8zsQuERE--y1mbductahLia9xY.jpg'); background-size:80vw 45vw; background-position:-80vw 0vw; transform:translate(80vw,0vw);}
#mg4{background:url('http://ekladata.com/Zv4VNRw3w0NmQHnTKY4V6CHkzQY.jpg'); background-size:80vw 45vw; background-position:-80vw -45vw; transform:translate(80vw,45vw);}
#mg5{background:url('http://ekladata.com/qnX0JnPwmm0jHGvqUtVyqZXb8sE.jpg'); background-size:80vw 45vw; background-position:-40vw -45vw; transform:translate(40vw,45vw);}
#mg6{background:url('http://ekladata.com/l7E7ohLaW2_Es3CjoGq-13BWVq4.jpg'); background-size:80vw 45vw; background-position:0vw -45vw; transform:translate(0vw,45vw);}
#fd1:hover ~ #mg1,#fd2:hover ~ #mg2,#fd3:hover ~ #mg3,#fd4:hover ~ #mg4,#fd5:hover ~ #mg5,#fd6:hover ~ #mg6{z-index:4; width:80vw; height:45vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
--></style>