Montage 11

Remplacez mes adresses images par les vôtres, au ratio 16/9.

<div style="width: 60vw; height: 33.75vw; border: 0.2vh solid black; margin: 1vh auto; background: linear-gradient(45deg, #cfe7fa 0%,#6393c1 100%);">
<p id="mq1" class="mq">&nbsp;</p>
<p id="mq2" class="mq">&nbsp;</p>
<p id="mq3" class="mq">&nbsp;</p>
<p id="mq4" class="mq">&nbsp;</p>
<p id="mq5" class="mq">&nbsp;</p>
<p id="mq6" class="mq">&nbsp;</p>
<p id="mq7" class="mq">&nbsp;</p>
<p id="mq8" class="mq">&nbsp;</p>
<p id="fon1" class="fon">&nbsp;</p>
<p id="fon2" class="fon">&nbsp;</p>
<p id="fon3" class="fon">&nbsp;</p>
<p id="fon4" class="fon">&nbsp;</p>
<p id="fon5" class="fon">&nbsp;</p>
<p id="fon6" class="fon">&nbsp;</p>
<p id="fon7" class="fon">&nbsp;</p>
<p id="fon8" class="fon">&nbsp;</p>
<p id="fon0">&nbsp;</p>
<p id="ex">Le survol d'une vignette l'affiche dans le cadre central et le clic maintenu sur la vignette agrandit l'image centrale.</p>
</div>

<style><!--
.mq{position:absolute; z-index:10; width:15vw; height:8.25vw;}
#mq1{transform:translate(0vw,0.25vw);}
#mq2{transform:translate(0vw,8.5vw);}
#mq3{transform:translate(0vw,16.75vw);}
#mq4{transform:translate(0vw,25vw);}
#mq5{transform:translate(45vw,0.25vw);}
#mq6{transform:translate(45vw,8.5vw);}
#mq7{transform:translate(45vw,16.75vw);}
#mq8{transform:translate(45vw,25vw);}

.fon{position:absolute; z-index:1; width:15vw; height:8.25vw; border:0.1vw solid white;}
#fon1{box-sizing:border-box; background:url('http://ekladata.com/7M4FyOQQHZyexw7fcHIsz4cZPZw.jpg'); background-size:cover; transform:translate(0vw,0.25vw);}
#fon2{box-sizing:border-box; background:url('http://ekladata.com/gHWCMnK5bmXGNanSE9eiYcA-kAU.jpg'); background-size:cover; transform:translate(0vw,8.5vw);}
#fon3{box-sizing:border-box; background:url('http://ekladata.com/hTWfNfiFDofYQafEUcoSym4v1qo.jpg'); background-size:cover; transform:translate(0vw,16.75vw);}
#fon4{box-sizing:border-box; background:url('http://ekladata.com/JQ4Jr1SrTh-ikRPxBKMoonXigsw.jpg'); background-size:cover; transform:translate(0vw,25vw);}
#fon5{box-sizing:border-box; background:url('http://ekladata.com/r1NqMvpeiEpSaxohgsyaBjTeYRY.jpg'); background-size:cover; transform:translate(45vw,0.25vw);}
#fon6{box-sizing:border-box; background:url('http://ekladata.com/Yf2qy7E8IRY_cLf_-XGD6BDq2Fw.jpg'); background-size:cover; transform:translate(45vw,8.5vw);}
#fon7{box-sizing:border-box; background:url('http://ekladata.com/sTfs_LWvFXclhTXIRvxmkl7376g.jpg'); background-size:cover; transform:translate(45vw,16.75vw);}
#fon8{box-sizing:border-box; background:url('http://ekladata.com/95Jzsy28DF8K92fEz-AXOtpAfTk.jpg'); background-size:cover; transform:translate(45vw,25vw);}

#fon0{position:absolute; z-index:5; width:28vw; height:15vw; transform:translate(16vw,10vw); background:white; transition:transform 1s linear, width 1s linear, height 1s linear;}
#ex{position:absolute; z-index:1; width:28vw;transform:translate(16vw,0vw); text-align:center; font-size:1vw;}

#mq1:hover ~ #fon0{background:url('http://ekladata.com/7M4FyOQQHZyexw7fcHIsz4cZPZw.jpg'); background-size:cover;}
#mq2:hover ~ #fon0{background:url('http://ekladata.com/gHWCMnK5bmXGNanSE9eiYcA-kAU.jpg'); background-size:cover;}
#mq3:hover ~ #fon0{background:url('http://ekladata.com/hTWfNfiFDofYQafEUcoSym4v1qo.jpg'); background-size:cover;}
#mq4:hover ~ #fon0{background:url('http://ekladata.com/JQ4Jr1SrTh-ikRPxBKMoonXigsw.jpg'); background-size:cover;}
#mq5:hover ~ #fon0{background:url('http://ekladata.com/r1NqMvpeiEpSaxohgsyaBjTeYRY.jpg'); background-size:cover;}
#mq6:hover ~ #fon0{background:url('http://ekladata.com/Yf2qy7E8IRY_cLf_-XGD6BDq2Fw.jpg'); background-size:cover;}
#mq7:hover ~ #fon0{background:url('http://ekladata.com/sTfs_LWvFXclhTXIRvxmkl7376g.jpg'); background-size:cover;}
#mq8:hover ~ #fon0{background:url('http://ekladata.com/95Jzsy28DF8K92fEz-AXOtpAfTk.jpg'); background-size:cover;}
#mq1:active ~ #fon0,#mq2:active ~ #fon0,#mq3:active ~ #fon0,#mq4:active ~ #fon0,#mq5:active ~ #fon0,#mq6:active ~ #fon0,#mq7:active ~ #fon0,#mq8:active ~ #fon0{transform:translate(0vw,0vw); width:60vw; height:33.75vw;}
--></style>