Montage 52

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 1vh auto; background: linear-gradient(to bottom, rgba(150,150,0,0.7) 0%, rgba(0,100,0,0.3) 100%);">
<p id="vt0">Clic maintenu jusqu'&agrave; la fin du changement de couleur (5s)</p>
<p id="vt1" class="vt">&nbsp;</p>
<p id="vt2" class="vt">&nbsp;</p>
<p id="vt3" class="vt">&nbsp;</p>
<p id="vt4" class="vt">&nbsp;</p>
<p id="vt5" class="vt">&nbsp;</p>
<p id="vt6" class="vt">&nbsp;</p>
<p id="vt7" class="vt">&nbsp;</p>
<p id="vt8" class="vt">&nbsp;</p>
</div>

<style><!--
#vt0{position:absolute; z-index:1; width:60vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(0vw,16vw);}
.vt{position:absolute; z-index:1; width:12vw; height:12vw; border:0.3vh solid white; border-radius:50%; box-shadow:0.4vh 0.4vh 0.8vh black, inset -0.6vh -0.6vh 0.8vh black, inset 0.6vh 0.6vh 0.8vh white;  filter:hue-rotate(270deg); -webkit-filter:hue-rotate(270deg); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, border-radius 1s linear 0s, border 1s linear 0s, background 1s linear 0s, filter 5s linear 1s;}
#vt1{box-sizing:border-box; background:url('http://ekladata.com/H3JKVKThOyFHK8RvLsVwjGDqJLs.jpg'); background-size:60vw 33.75vw; background-position:-3vw -3vw; transform:translate(3vw,3vw);}
#vt2{box-sizing:border-box; background:url('http://ekladata.com/DZ2BvFQnE9woWRlz4lhIODqwXiM.jpg'); background-size:60vw 33.75vw; background-position:-17vw -3vw; transform:translate(17vw,3vw);}
#vt3{box-sizing:border-box; background:url('http://ekladata.com/95kuvfcWHhMkygqpdF5zR1vZcdw.jpg'); background-size:60vw 33.75vw; background-position:-31vw -3vw; transform:translate(31vw,3vw);}
#vt4{box-sizing:border-box; background:url('http://ekladata.com/CB2JWpK1t_tRGeYe5cnOtOCEEP0.jpg'); background-size:60vw 33.75vw; background-position:-45vw -3vw; transform:translate(45vw,3vw);}
#vt5{box-sizing:border-box; background:url('http://ekladata.com/84_SRCdpmMxVKt8aL6UknItL2GY.jpg'); background-size:60vw 33.75vw; background-position:-3vw -20vw; transform:translate(3vw,20vw);}
#vt6{box-sizing:border-box; background:url('http://ekladata.com/ly2SyX55KW5BGzfMar7y2gFx_hE.jpg'); background-size:60vw 33.75vw; background-position:-17vw -20vw; transform:translate(17vw,20vw);}
#vt7{box-sizing:border-box; background:url('http://ekladata.com/KLTBxNTbJVR8ast3UCsFLV__QmI.jpg'); background-size:60vw 33.75vw; background-position:-31vw -20vw; transform:translate(31vw,20vw);}
#vt8{box-sizing:border-box; background:url('http://ekladata.com/qr4-k1HUbqIyg6TEkjb1O_mxorU.jpg'); background-size:60vw 33.75vw; background-position:-45vw -20vw; transform:translate(45vw,20vw);}
#vt1:active,#vt2:active,#vt3:active,#vt4:active,#vt5:active,#vt6:active,#vt7:active,#vt8:active{z-index:10;width:60vw; height:33.75vw; border-radius:0%; border:none; background-position:0vw 0vw; box-shadow:none; transform:translate(0vw,0vw); filter:hue-rotate(0deg);}
--></style>