Montage 37

Même principe que le montage 36 mais avec 16 images (ratio 16/9).

Clic maintenu sur chaque vignette.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="rec1" class="rec">&nbsp;</p>
<p id="rec2" class="rec">&nbsp;</p>
<p id="rec3" class="rec">&nbsp;</p>
<p id="rec4" class="rec">&nbsp;</p>
<p id="rec5" class="rec">&nbsp;</p>
<p id="rec6" class="rec">&nbsp;</p>
<p id="rec7" class="rec">&nbsp;</p>
<p id="rec8" class="rec">&nbsp;</p>
<p id="rec9" class="rec">&nbsp;</p>
<p id="rec10" class="rec">&nbsp;</p>
<p id="rec11" class="rec">&nbsp;</p>
<p id="rec12" class="rec">&nbsp;</p>
<p id="rec13" class="rec">&nbsp;</p>
<p id="rec14" class="rec">&nbsp;</p>
<p id="rec15" class="rec">&nbsp;</p>
<p id="rec16" class="rec">&nbsp;</p>
</div>

<style><!--
.rec{position:absolute; z-index:1; width:7.5vw; height:16.875vw; border:0.6vh solid white; filter:grayscale(1); -webkit-filter:grayscale(1);transition: transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
#rec1{background:url('http://ekladata.com/4LaGyZx8mG6mobc92TTkYf42XL0.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; box-sizing:border-box; transform:translate(0vw,0vw);}
#rec2{background:url('http://ekladata.com/xDex2pBuZCF74tlIY8SjFYKXay8.jpg'); background-size:60vw 33.75vw; background-position:-7.5vw 0vw; box-sizing:border-box;transform:translate(7.5vw,0vw);}
#rec3{background:url('http://ekladata.com/UE_8Ri_2h9NM4wwS3W_9ipfrjt8.jpg'); background-size:60vw 33.75vw; background-position:-15vw 0vw; box-sizing:border-box;transform:translate(15vw,0vw);}
#rec4{background:url('http://ekladata.com/pDcJKt_QK0IPyl4gFbLvHmjk9d4.jpg'); background-size:60vw 33.75vw; background-position:-22.5vw 0vw; box-sizing:border-box;transform:translate(22.5vw,0vw);}
#rec5{background:url('http://ekladata.com/hzJf6aTMRjy8usZjMrgTIlPplOw.jpg'); background-size:60vw 33.75vw; background-position:-30vw 0vw; box-sizing:border-box; transform:translate(30vw,0vw);}
#rec6{background:url('http://ekladata.com/FZStDpnmxOO6Zgirc7dXnV2HGKc.jpg'); background-size:60vw 33.75vw; background-position:-37.5vw 0vw; box-sizing:border-box;transform:translate(37.5vw,0vw);}
#rec7{background:url('http://ekladata.com/Fc8C1Zp8QTXrNrlTwl1mYpjBC2Y.jpg'); background-size:60vw 33.75vw; background-position:-45vw 0vw; box-sizing:border-box;transform:translate(45vw,0vw);}
#rec8{background:url('http://ekladata.com/rwAWuKdD0J4ylob5QbQ15oCoawk.jpg'); background-size:60vw 33.75vw; background-position:-52.5vw 0vw; box-sizing:border-box;transform:translate(52.5vw,0vw);}

#rec9{background:url('http://ekladata.com/oPgq7miLDoU2kJbecGldRWKXIKk.jpg'); background-size:60vw 33.75vw; background-position:0vw -16.875vw; box-sizing:border-box; transform:translate(0vw,16.875vw);}
#rec10{background:url('http://ekladata.com/wo7PSOD1axOqXSGZfhtGMGwH0d8.jpg'); background-size:60vw 33.75vw; background-position:-7.5vw -16.875vw; box-sizing:border-box;transform:translate(7.5vw,16.875vw);}
#rec11{background:url('http://ekladata.com/A0ykWpm2haBohrpFLfERYWHyF-0.jpg'); background-size:60vw 33.75vw; background-position:-15vw -16.875vw; box-sizing:border-box;transform:translate(15vw,16.875vw);}
#rec12{background:url('http://ekladata.com/bYtay0BF7qR6S1smHueWlO-3MkQ.jpg'); background-size:60vw 33.75vw; background-position:-22.5vw -16.875vw; box-sizing:border-box;transform:translate(22.5vw,16.875vw);}
#rec13{background:url('http://ekladata.com/4j2FdCXXGGU0kEzDna_nCy2bvME.jpg'); background-size:60vw 33.75vw; background-position:-30vw -16.875vw; box-sizing:border-box; transform:translate(30vw,16.875vw);}
#rec14{background:url('http://ekladata.com/7EHD8I4kp7JmsYEc6Micow7SEa0.jpg'); background-size:60vw 33.75vw; background-position:-37.5vw -16.875vw; box-sizing:border-box;transform:translate(37.5vw,16.875vw);}
#rec15{background:url('http://ekladata.com/5Bh2pqz5VT9uZ3fdm7rIyCo5qG8.jpg'); background-size:60vw 33.75vw; background-position:-45vw -16.875vw; box-sizing:border-box;transform:translate(45vw,16.875vw);}
#rec16{background:url('http://ekladata.com/VyEwM-ewnkZXDeHL1qjKzRnEGOI.jpg'); background-size:60vw 33.75vw; background-position:-52.5vw -16.875vw; box-sizing:border-box;transform:translate(52.5vw,16.875vw);}

#rec1:active,#rec2:active,#rec3:active,#rec4:active,#rec5:active,#rec6:active,#rec7:active,#rec8:active,#rec9:active,#rec10:active,#rec11:active,#rec12:active,#rec13:active,#rec14:active,#rec15:active,#rec16:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw); filter:grayscale(0);-webkit-filter:grayscale(0); background-position:0vw 0vw;}
--></style>