-
Montage 106
Un montage simple pour 7 images au ratio 16/9; Clic maintenu.
<div style="width:60vw; height:33.75vw; margin:1vh auto;">
<p id="mar1"> </p>
<p id="mar2"> </p>
<p id="mar3"> </p>
<p id="mar4"> </p>
<p id="mar5"> </p>
<p id="mar6"> </p>
<p id="mar7"> </p>
</div>
<style><!--
#mar1{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:33.75vw; border:0.4vh solid white; background:url('http://ekladata.com/dWPyvjMciQVtZ9y5DzPQCbKctlY.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); transition:all 1s linear;}
#mar2{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:17vw; border:0.4vh solid white; background:url('http://ekladata.com/UE0n0WnS-SluIB8bXXKizZ0YsxU.jpg'); background-size:60vw 33.75vw; background-position:-10vw 0vw; transform:translate(10vw,0vw); transition:all 1s linear;}
#mar3{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:16.75vw; border:0.4vh solid white; background:url('http://ekladata.com/WYOkxZ4IEw2Ip8f-vNkLvD8qj_w.jpg'); background-size:60vw 33.75vw; background-position:-10vw -17vw; transform:translate(10vw,17vw); transition:all 1s linear;}
#mar4{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:33.75vw; border:0.4vh solid white; background:url('http://ekladata.com/lPVCjFq3Mum-pj_qv3fmDGDAvmI.jpg'); background-size:60vw 33.75vw; background-position:-25vw 0vw; transform:translate(25vw,0vw); transition:all 1s linear;}
#mar5{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:17vw; border:0.4vh solid white; background:url('http://ekladata.com/Qe2TRe4nOyo-7I9kKL5YiEIJeeE.jpg'); background-size:60vw 33.75vw; background-position:-35vw 0vw; transform:translate(35vw,0vw); transition:all 1s linear;}
#mar6{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:16.75vw; border:0.4vh solid white; background:url('http://ekladata.com/SrTywm3gju-Qh01Gy1OwVLbWRb8.jpg'); background-size:60vw 33.75vw; background-position:-35vw -17vw; transform:translate(35vw,17vw); transition:all 1s linear;}
#mar7{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:33.75vw; border:0.4vh solid white; background:url('http://ekladata.com/a2kMK-EtC0GEbIb1Cs-JWGoM7Zk.jpg'); background-size:60vw 33.75vw; background-position:-50vw 0vw; transform:translate(50vw,0vw); transition:all 1s linear;}
#mar1:active,#mar2:active,#mar3:active,#mar4:active,#mar5:active,#mar6:active,#mar7:active{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
--></style>