Montage 129

9+1 images

<div style="width: 60vw; height: 33.75vw; border: 0.3vh ridge black; background: url('http://ekladata.com/oS0h3SHZhrnTIfqYasSCua79EtY.jpg'); background-size: cover; margin: 1vh auto;">
<p id="ind">Survol</p>
<p id="cmd1" class="cmdg">&nbsp;</p>
<p id="cmd2" class="cmdg">&nbsp;</p>
<p id="cmd3" class="cmdg">&nbsp;</p>
<p id="cmd4" class="cmdg">&nbsp;</p>
<p id="cmd5" class="cmdd">&nbsp;</p>
<p id="cmd6" class="cmdd">&nbsp;</p>
<p id="cmd7" class="cmdd">&nbsp;</p>
<p id="cmd8" class="cmdd">&nbsp;</p>
<p id="cmd9" class="cmdd">&nbsp;</p>
</div>

<style><!--
#ind{position:absolute; z-index:1; width:5vw; background:rgba(0,0,0,0.5); font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(0vw,0vw);}
.cmdg{position:absolute; z-index:1; width:2vw; height:4vw; border:0.2vh solid white;  filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, height 1s linear 0s, background 1s linear 0s, width 1s linear 1s, filter 1s linear 2s;}
.cmdd{position:absolute; z-index:1; transform-origin: top right; width:2vw; height:4vw; border:0.2vh solid white; filter:grayscale(1); -webkit-filter:grayscale(1); transition:transform 1s linear 0s, height 1s linear 0s, background 1s linear 1s, margin 1s linear 1s, width 1s linear 1s, filter 1s linear 2s;}
#cmd1{background:url('http://ekladata.com/shrfGEX4wG6sNbU7rsGwt1FPRJQ.jpg'); background-size:60vw 33.75vw; background-position:0vw -5vw; transform:translate(0vw,5vw); border-radius:0 0.5vw 0.5vw 0;}
#cmd2{background:url('http://ekladata.com/lpf8FCiJLRzURmJ7ujEAtw8k1c8.jpg'); background-size:60vw 33.75vw; background-position:0vw -10vw; transform:translate(0vw,10vw); border-radius:0 0.5vw 0.5vw 0;}
#cmd3{background:url('http://ekladata.com/YNNyIxPUbMVPHPl5IPFJwLbMP-U.jpg'); background-size:60vw 33.75vw; background-position:0vw -15vw; transform:translate(0vw,15vw); border-radius:0 0.5vw 0.5vw 0;}
#cmd4{background:url('http://ekladata.com/UHnu2CsfyEfX1wUuCvJSDDXT090.jpg'); background-size:60vw 33.75vw; background-position:0vw -20vw; transform:translate(0vw,20vw); border-radius:0 0.5vw 0.5vw 0;}
#cmd5{background:url('http://ekladata.com/W8vzTVifl0TyqXGzGOtQbDoeS_s.jpg'); background-size:60vw 33.75vw; background-position:-58vw 0vw; margin:0vw 58vw; transform:translate(0vw,5vw); border-radius:0.5vw 0 0 0.5vw; }
#cmd6{background:url('http://ekladata.com/-e2214E4Msd__gUJrNZO2gHND4A.jpg'); background-size:60vw 33.75vw;  background-position:-58vw 0vw; transform:translate(0vw,10vw); border-radius:0.5vw 0 0 0.5vw; margin:0vw 58vw;}
#cmd7{background:url('http://ekladata.com/XzNNl5gy6MopmV1FOh2aiwW6bCI.jpg'); background-size:60vw 33.75vw; background-position:-58vw 0vw;  transform:translate(0vw,15vw); border-radius:0.5vw 0 0 0.5vw; margin:0vw 58vw;}
#cmd8{background:url('http://ekladata.com/sWqIhOope-jFY6o8CkgDdOIB7VA.jpg') ; background-size:60vw 33.75vw;  background-position:-58vw 0vw; transform:translate(0vw,20vw); border-radius:0.5vw 0 0 0.5vw; margin:0vw 58vw;}
#cmd9{background:url('http://ekladata.com/Qhz4FPppZsfvPkvaaiS9J5whXhs.jpg'); background-size:60vw 33.75vw;  background-position:-58vw 0vw; transform:translate(0vw,25vw); border-radius:0.5vw 0 0 0.5vw; margin:0vw 58vw;}
#cmd1:hover,#cmd2:hover,#cmd3:hover,#cmd4:hover,#cmd5:hover,#cmd6:hover,#cmd7:hover,#cmd8:hover,#cmd9:hover{z-index:5; background-position:0vw 0vw; width:60vw; height:33.75vw;  transform:translate(0vw,0vw); margin:0vw 0vw; border:none; border-radius:0 0 0 0; filter:grayscale(0); -webkit-filter:grayscale(0);}
--></style>