• 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">&nbsp;</p>
    <p id="mar2">&nbsp;</p>
    <p id="mar3">&nbsp;</p>
    <p id="mar4">&nbsp;</p>
    <p id="mar5">&nbsp;</p>
    <p id="mar6">&nbsp;</p>
    <p id="mar7">&nbsp;</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>