• Montage 92

    10 images au ratio 16/9 horizontales; remplacez mes adresses d'images en bleu, par les vôtres.

    Clic maintenu

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="pl0">Clic maintenu</p>
    <p id="pl1" class="pl">&nbsp;</p>
    <p id="pl2" class="pl">&nbsp;</p>
    <p id="pl3" class="pl">&nbsp;</p>
    <p id="pl4" class="pl">&nbsp;</p>
    <p id="pl5" class="pl">&nbsp;</p>
    <p id="pl6" class="pl">&nbsp;</p>
    <p id="pl7" class="pl">&nbsp;</p>
    <p id="pl8" class="pl">&nbsp;</p>
    <p id="pl9" class="pl">&nbsp;</p>
    <p id="pl10" class="pl">&nbsp;</p>
    </div>

    <style><!--
    #pl0{position:absolute; z-index:1; width:9vw; text-align:center; font-size:1.2vw; transform:translate(2vw,15vw);}
    .pl{position:absolute; z-index:1; box-sizing:borser-box;width:8vw; height:16vw; border:0.1vh solid black; transition:all 1s linear;}
    #pl1{transform:translate(10vw,2vw) rotatex(30deg) skewx(30deg);background:url('http://ekladata.com/OGBE9QDqUGyF8hKgq06pUt7lGHo.jpg'); background-position:0vw 0vw; background-size:60vw 33.75vw;}
    #pl2{transform:translate(18vw,2vw) rotatex(30deg) skewx(30deg);background:url('http://ekladata.com/_24S44HF-w-n06vd6LzvgK4padM.jpg'); background-position:-10vw 0vw; background-size:60vw 33.75vw;}
    #pl3{transform:translate(26vw,2vw) rotatex(30deg) skewx(30deg);background:url('http://ekladata.com/uTRuHguTLU-n4JL8cnVuFXzMEGU.jpg'); background-position:-20vw 0vw; background-size:60vw 33.75vw;}
    #pl4{transform:translate(34vw,2vw) rotatex(30deg) skewx(30deg);background:url('http://ekladata.com/Xe-9ylIK2qhkkly_ZYKDY2B_Pr4.jpg'); background-position:-30vw 0vw; background-size:60vw 33.75vw;}
    #pl5{transform:translate(42vw,2vw) rotatex(30deg) skewx(30deg);background:url('http://ekladata.com/nnXZnASdbC3aGMfbZ9cLiptsINg.jpg'); background-position:-40vw 0vw; background-size:60vw 33.75vw;}
    #pl6{transform:translate(10vw,16vw) rotatex(-30deg) skewx(-30deg);background:url('http://ekladata.com/3kRhqXlwlWYSWKKcPgV7uVawvas.jpg'); background-position:0vw -21vw; background-size:60vw 33.75vw;}
    #pl7{transform:translate(18vw,16vw) rotatex(-30deg) skewx(-30deg);background:url('http://ekladata.com/gcaK6CW0mAL1WO8NSlw3ZRpqklo.jpg'); background-position:-10vw -21vw; background-size:60vw 33.75vw;}
    #pl8{transform:translate(26vw,16vw) rotatex(-30deg) skewx(-30deg);background:url('http://ekladata.com/Cal62UrKOBpUMT5w9LqA6gS1HCE.jpg'); background-position:-20vw -21vw; background-size:60vw 33.75vw;}
    #pl9{transform:translate(34vw,16vw) rotatex(-30deg) skewx(-30deg);background:url('http://ekladata.com/39lzv_FD-a4EQGBq-ILmiRiIUNY.jpg'); background-position:-30vw -21vw; background-size:60vw 33.75vw;}
    #pl10{transform:translate(42vw,16vw) rotatex(-30deg) skewx(-30deg);background:url('http://ekladata.com/a8WkByM3lPlxgTAErYxkhb_PE8I.jpg'); background-position:-40vw -21vw; background-size:80vw 45vw;}
    #pl1:active,#pl2:active,#pl3:active,#pl4:active,#pl5:active,#pl6:active,#pl7:active,#pl8:active,#pl9:active,#pl10:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotatex(0deg) skewx(0deg); background-position:0vw 0vw; background-size:60vw 33.75vw;}
    --></style>