Montage 103

6 images au ratio 16/9

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; ">
<p id="ex0">Clic maintenu</p>
<p id="ex1" class="ex">&nbsp;</p>
<p id="ex2" class="ex">&nbsp;</p>
<p id="ex3" class="ex">&nbsp;</p>
<p id="ex4" class="ex">&nbsp;</p>
<p id="ex5" class="ex">&nbsp;</p>
<p id="ex6" class="ex">&nbsp;</p>
</div>
<style><!--
#ex0{position:absolute; z-index:1; width:12vw; text-align:center; font-size:1.2vw; transform:translate(24vw,0vw);}
.ex{position:absolute; z-index:1; width:12vw; height:12vw; border:0.4vh ridge white; box-shadow:0.4vh 0.4vh 0.6vh black; border-radius:4vw; -webkit-filter:grayscale(1); filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s, border-radius 0.3s linear 1s;}
#ex1{transform:translate(6vw,3vw) rotatex(180deg); background:url('http://ekladata.com/qowQcveJTNOOoFZaJZpjvDEoC8E.jpg'); background-size:cover;}
#ex2{transform:translate(24vw,3vw) rotatex(180deg); background:url('http://ekladata.com/23nMtIlkSUxmheQxl85CKZvaZVA.jpg'); background-size:cover;}
#ex3{transform:translate(42vw,3vw) rotatex(180deg); background:url('http://ekladata.com/iqK0wsuw0G13Pnu_K1SSZtAW0iI.jpg'); background-size:cover;}
#ex4{transform:translate(6vw,18vw) rotatex(180deg); background:url('http://ekladata.com/UBm26x5ZM2-HKvIHnAeum51qwv4.jpg'); background-size:cover;}
#ex5{transform:translate(24vw,18vw) rotatex(180deg); background:url('http://ekladata.com/OzXpAfOj4pCWFcgqWGI0AQ2MEUY.jpg'); background-size:cover;}
#ex6{transform:translate(42vw,18vw) rotatex(180deg); background:url('http://ekladata.com/FmpCH7jXAbg0CKoCwHBnKQsqHhE.jpg'); background-size:cover;}
#ex1:active,#ex2:active,#ex3:active,#ex4:active,#ex5:active,#ex6:active{z-index:5; box-sizing:border-box; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatex(0deg); filter:grayscale(0); -webkit-filter:grayscale(0); border-radius:0%;}
--></style>