Montage 14

... 

<div style="width: 60vw; height: 33.75vw; border: 0.2vh solid black; margin: 1vh auto; background: url('http://ekladata.com/ennWuggIhX-_-Pk07X_kDqexXZA.jpg'); background-size: cover;">
<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"><span style="background-color: #00ff00;">Le survol de chaque vignette</span> jusqu'&agrave; coloration.</p>
</div>
<style><!--
.mq{position:absolute; z-index:10; width:4vw; height:6vw;}
#mq1{transform:translate(1vw,1vw);}
#mq2{transform:translate(1vw,9vw);}
#mq3{transform:translate(1vw,17vw);}
#mq4{transform:translate(1vw,25vw);}
#mq5{transform:translate(55vw,1vw);}
#mq6{transform:translate(55vw,9vw);}
#mq7{transform:translate(55vw,17vw);}
#mq8{transform:translate(55vw,25vw);}


.fon{position:absolute; z-index:1; width:12vw; height:6vw; border:0.2vw solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1.5s;}
#fon1{box-sizing:border-box; background:url('http://ekladata.com/XwjiAyEGGmYDzyRqAGG2l-ZsHbw.jpg'); background-size:cover; transform:translate(1vw,1vw) perspective(15vw) rotatey(60deg);transform-origin:center left; -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon2{box-sizing:border-box; background:url('http://ekladata.com/MPQ_39s8Fcs5dgzag2wE3lbdEsI.jpg'); background-size:cover; transform:translate(1vw,9vw) perspective(15vw) rotatey(60deg);transform-origin:center left; -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon3{box-sizing:border-box; background:url('http://ekladata.com/FCTfRDi-gU0xSz6HwAjC8hwy1Ss.jpg'); background-size:cover; transform:translate(1vw,17vw) perspective(15vw) rotatey(60deg);transform-origin:center left; -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon4{box-sizing:border-box; background:url('http://ekladata.com/74yWNdLFEa7nPrnjaP8Gtg2mpIg.jpg'); background-size:cover; transform:translate(1vw,25vw) perspective(15vw) rotatey(60deg);transform-origin:center left; -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon5{box-sizing:border-box; background:url('http://ekladata.com/8jaQ38as4087e-7R3STNkuIfXjg.jpg'); background-size:cover; transform:translate(47vw,1vw) perspective(15vw) rotatey(-60deg) ; transform-origin:center right; -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon6{box-sizing:border-box; background:url('http://ekladata.com/-doQn12NHoI8q4_c8IVrNUpRKH4.jpg'); background-size:cover; transform:translate(47vw,9vw) perspective(15vw) rotatey(-60deg);  transform-origin:center right; -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon7{box-sizing:border-box; background:url('http://ekladata.com/TDpjUi_K_zPfb92bhZJDf2rNJHQ.jpg'); background-size:cover; transform:translate(47vw,17vw) perspective(15vw) rotatey(-60deg); transform-origin:center right; -webkit-filter:grayscale(1);filter:grayscale(1);}
#fon8{box-sizing:border-box; background:url('http://ekladata.com/ujl0dNCI59LGUT3zMLF3vmkyf_o.jpg'); background-size:cover; transform:translate(47vw,25vw) perspective(15vw) rotatey(-60deg); transform-origin:center right; -webkit-filter:grayscale(1);filter:grayscale(1);}

#ex{position:absolute; z-index:1; width:30vw;transform:translate(14vw,0.5vw); text-align:center; font-size:1vw;}

#mq1:hover ~ #fon1,#mq2:hover ~ #fon2,#mq3:hover ~ #fon3,#mq4:hover ~ #fon4,#mq5:hover ~ #fon5,#mq6:hover ~ #fon6,#mq7:hover ~ #fon7,#mq8:hover ~ #fon8{z-index:5;transform:translate(0vw,0vw) perspective(100vw) rotatey(0deg); width:60vw; height:33.75vw; border:none; -webkit-filter:grayscale(0);filter:grayscale(0);}
--></style>