Montage 13 survol

Je vous propose une série de 3 montages identiques avec commande soit au survol, soit au clic, soit au clic maintenu et vous choisirez celui que vous préférez.

Le changement de commande correspond au changement d'un seul mot dans le code.

Dans la dernière ligne de code, le survol est déterminé par la commande hover.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/rH06Eq974X8wPjBkUfEKUcEDLTA.jpg'); background-size: cover;">
<p id="vg1" class="vg">&nbsp;</p>
<p id="vg2" class="vg">&nbsp;</p>
<p id="vg3" class="vg">&nbsp;</p>
<p id="vg4" class="vg">&nbsp;</p>
<p id="vg5" class="vg">&nbsp;</p>
<p id="vg6" class="vg">&nbsp;</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="cc">Survol</p>
</div>

<style><!--
.vg{position:absolute; z-index:10; width:8vw; height:2.75vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black;}
#vg1{box-sizing:border:box; background:url('http://ekladata.com/vSUL9sbYuydyRCoxT0t3w79OrVw.jpg'); background-size:cover; transform:translate(1vw,30vw);}
#vg2{box-sizing:border:box; background:url('http://ekladata.com/-tQeANN3f_NCH_7D3GKt-amcUlw.jpg'); background-size:cover; transform:translate(10vw,30vw);}
#vg3{box-sizing:border:box; background:url('http://ekladata.com/MRgOFb-LblHB1hModxfW16G3GZU.jpg'); background-size:cover; transform:translate(20vw,30vw);}
#vg4{box-sizing:border:box; background:url('http://ekladata.com/QygfvPXjcyumIMPuZpnRP8Subo8.jpg'); background-size:cover; transform:translate(30vw,30vw);}
#vg5{box-sizing:border:box; background:url('http://ekladata.com/rXWpcWTcDtlf7L8969UNhgpHcHE.jpg'); background-size:cover; transform:translate(40vw,30vw);}
#vg6{box-sizing:border:box; background:url('http://ekladata.com/NXDT1H2S-fuCPQkso81iABfYkbg.jpg'); background-size:cover; transform:translate(50vw,30vw);}
.fd{position:absolute; z-index:5; width:60vw; height:33.75vw; opacity:0; transition:all 1s linear;}
#fd1{background:url('http://ekladata.com/vSUL9sbYuydyRCoxT0t3w79OrVw.jpg'); background-size:cover;}
#fd2{background:url('http://ekladata.com/-tQeANN3f_NCH_7D3GKt-amcUlw.jpg'); background-size:cover;}
#fd3{background:url('http://ekladata.com/MRgOFb-LblHB1hModxfW16G3GZU.jpg'); background-size:cover;}
#fd4{background:url('http://ekladata.com/QygfvPXjcyumIMPuZpnRP8Subo8.jpg'); background-size:cover;}
#fd5{background:url('http://ekladata.com/rXWpcWTcDtlf7L8969UNhgpHcHE.jpg'); background-size:cover;}
#fd6{background:url('http://ekladata.com/NXDT1H2S-fuCPQkso81iABfYkbg.jpg'); background-size:cover;}
#cc{position:absolute; z-index:1; width:4vw; background:rgba(0,0,0,0.5); font-size:1vw; color:white; text-shadow:0.1vh 0.1vh black;}
#vg1:hover ~ #fd1,#vg2:hover ~ #fd2,#vg3:hover ~ #fd3,#vg4:hover ~ #fd4,#vg5:hover ~ #fd5,#vg6:hover ~ #fd6{opacity:1;}
--></style>