• Montage 89

    6 images au ratio 16/9 dont 2 verticales, dans cet exemple

     

     

     

     

    Clic maintenu

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vw auto;">
    <p id="part1">&nbsp;</p>
    <p id="part2">&nbsp;</p>
    <p id="part3">&nbsp;</p>
    <p id="part4">&nbsp;</p>
    <p id="part5">Clic maintenu</p>
    <p id="part6">&nbsp;</p>
    <p id="part7">&nbsp;</p>
    </div>

    <style><!--
    #part1{position:absolute; z-index:1; box-sizing:border-box; width:25vw; height:15vw; border:0.6vh ridge white; transform:translate(0vw,0vw); background:url('http://ekladata.com/iHN3gs2HlTXafELO2qmzGExvYWA.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transition:all 1s linear;}
    #part2{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:15vw; border:0.6vh ridge white; transform:translate(25vw,0vw); background:url('http://ekladata.com/CVTwe18iYCNJwL3qVDEps8LK8c0.jpg'); background-size:20.5vw 33.75vw; background-position:-25vw 0vw; transition:all 1s linear;}
    #part3{position:absolute; z-index:1; box-sizing:border-box; width:20vw; height:18.75vw; border:0.6vh ridge white; transform:translate(40vw,0vw); background:url('http://ekladata.com/Iew7qP8AeprJ0LhSmczUX2wE5Bo.jpg'); background-size:60vw 33.75vw; background-position:-40vw 0vw; transition:all 1s linear;}
    #part4{position:absolute; z-index:1; box-sizing:border-box; width:23vw; height:18.75vw; border:0.6vh ridge white; transform:translate(0vw,15vw); background:url('http://ekladata.com/Iew7qP8AeprJ0LhSmczUX2wE5Bo.jpg'); background-size:60vw 33.75vw; background-position:0vw -15vw; transition:all 1s linear;}
    #part5{position:absolute; z-index:1; box-sizing:border-box; width:17vw; height:3.75vw; border:0.6vh ridge white; transform:translate(23vw,15vw); text-align:center; font-size:1.5vw; line-height:3.75vw;}
    #part6{position:absolute; z-index:1; box-sizing:border-box; width:20vw; height:15vw; border:0.6vh ridge white; transform:translate(23vw,18.75vw); background:url('http://ekladata.com/e88O4GIno4J08tXhnMW6s2DDizo.jpg'); background-size:60vw 33.75vw; background-position:-23vw -18.75vw; transition:all 1s linear;}
    #part7{position:absolute; z-index:1; box-sizing:border-box; width:17vw; height:15vw; border:0.6vh ridge white; transform:translate(43vw,18.75vw); background:url('http://ekladata.com/oKMpftH8i7pulDpPiNct6Kj-FFs.jpg'); background-size:20.5vw 33.75vw; background-position:-43vw -18.75vw; transition:all 1s linear;}
    #part2:active{z-index:5; width:20.5vw; height:33.75vw; transform:translate(23vw,0vw); background-position:-23vw 0vw;}
    #part7:active{z-index:5; width:20.5vw; height:33.75vw; transform:translate(39.5vw,0vw); background-position:-39.5vw 0vw;}
    #part1:active,#part3:active,#part4:active,#part6:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>