• Exemple 57

    Un montage simple pour 8 images au ratio 16/9, dimensionnées en 1152x648px par le code.

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">

    <p id="bt1" class="bt">&nbsp;</p>

    <p id="bt2" class="bt">&nbsp;</p>

    <p id="bt3" class="bt">&nbsp;</p>

    <p id="bt4" class="bt">&nbsp;</p>

    <p id="bt5" class="bt">&nbsp;</p>

    <p id="bt6" class="bt">&nbsp;</p>

    <p id="bt7" class="bt">&nbsp;</p>

    <p id="bt8" class="bt">&nbsp;</p>

    </div>

    <style><!--

    .bt{position:absolute; z-index:1; width:16vw; height:12vw; border:0.4vh ridge white; box-shadow:0.4vh 0.4vh 0.6vh black; background-size:60vw 33.75vw; filter:grayscale(1);  transition:all 1s linear;}

    #bt1{box-sizing:border-box; background:url('http://ekladata.com/XdEUi0FEAWCjVY9Sb1sUz4bJFqQ@1152x648.jpg'); background-position:0vw 0vw; transform:translate(0vw,0vw);}

    #bt2{box-sizing:border-box; background:url('http://ekladata.com/KKQfpQBVBRhIM093nogCzFo4wiM@1152x648.jpg'); background-position:-22vw 0vw; transform:translate(22vw,0vw);}

    #bt3{box-sizing:border-box; background:url('http://ekladata.com/cwE0KyIDQCcZCbOwMNb-Y_RJ27M@1152x648.jpg'); background-position:-44vw 0vw; transform:translate(44vw,0vw); }

    #bt4{box-sizing:border-box; background:url('http://ekladata.com/rnk5Gq7wX2mfxUUqMMuIrYFs5uc@1152x648.jpg'); background-position:-9vw -10.75vw; transform:translate(9vw,10.75vw);}

    #bt5{box-sizing:border-box; background:url('http://ekladata.com/CnL4jx9A9bTdtYuYuW80AnURZf4@1152x648.jpg'); background-position:-33vw -10.75vw; transform:translate(33vw,10.75vw);}

    #bt6{box-sizing:border-box; background:url('http://ekladata.com/B5e9y1w2LaAA5yxxVuoPsln_pgE@1152x648.jpg'); background-position:-0vw -21.75vw; transform:translate(0vw,21.75vw);}

    #bt7{box-sizing:border-box; background:url('http://ekladata.com/vGEdZBGWraLR2HrXTmPTNLpQvTk@1152x648.jpg'); background-position:-22vw -21.75vw; transform:translate(22vw,21.75vw);}

    #bt8{box-sizing:border-box; background:url('http://ekladata.com/ea54WXwW0W-WxPtz_k3xWnmSAHU@1152x648.jpg'); background-position:-44vw -21.75vw; transform:translate(44vw,21.75vw);}

    #bt1:hover,#bt2:hover,#bt3:hover,#bt4:hover,#bt5:hover,#bt6:hover,#bt7:hover,#bt8:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw; filter:grayscale(0);}

    --></style>