Montage 110

Clic maintenu sur vignettes.

Je n'ai pas l'habitude de photographier des vitraux mais je trouve que c'est bien adapté à ce genre d'animation.

<div style="width: 60vw; height: 33.75vw; border: 0.2vh solid grey; margin: 1vh auto; background: url('http://ekladata.com/ydg3rq4DVUxw19AwfkCxp2lWD5I.jpg'); background-size: cover;">
<p id="vit0">Clic maintenu</p>
<p id="vit1" class="vit">&nbsp;</p>
<p id="vit2" class="vit">&nbsp;</p>
<p id="vit3" class="vit">&nbsp;</p>
<p id="vit4" class="vit">&nbsp;</p>
</div>

<style><!--
#vit0{position:absolute; z-index:1; width:15vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(45vw,0vw);}
.vit{position:absolute; z-index:1; width:5vw; height:5vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; border-radius:50%; -webkit-filter:grayscale(1); filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, border 1s linear 0s, border-radius 1s linear 0s, filter 1s linear 1s;}
#vit1{box-sizing:border-box; transform:translate(50vw,4vw); background:url('http://ekladata.com/OlyPnQh3-g-WJT7Bz5Ge8YhOcfA.jpg'); background-position:50% 50%;}
#vit2{box-sizing:border-box;transform:translate(50vw,11vw); background:url('http://ekladata.com/NaLnsVXWFjfeFqaaJCzU2TZFK_0.jpg'); background-position:50% 50%;}
#vit3{box-sizing:border-box;transform:translate(50vw,18vw); background:url('http://ekladata.com/Ix-jUmFqKxmv_x73YvzJgRcg7ak.jpg'); background-position:50% 50%;}
#vit4{box-sizing:border-box;transform:translate(50vw,25vw); background:url('http://ekladata.com/38G5eOAEnL5PM43mXacCL1RYotw.jpg'); background-position:50% 50%;}
#vit1:active,#vit2:active,#vit3:active,#vit4:active{ z-index:5; width:19vw; height:33.75vw; border-radius:0%; transform:translate(30vw,0vw); -webkit-filter:grayscale(0); filter:grayscale(0);box-shadow:none;}
--></style>