• exemple 124

    7 images au ratio 16/9 dimensionnées en 60vw soit 60% de votre écran, par le code.

    Clic maintenu sur chaque vignette. 

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="cart1" class="cart">&nbsp;</p>
    <p id="cart2" class="cart">&nbsp;</p>
    <p id="cart3" class="cart">&nbsp;</p>
    <p id="cart4" class="cart">&nbsp;</p>
    <p id="cart5" class="cart">&nbsp;</p>
    <p id="cart6" class="cart">&nbsp;</p>
    <p id="cart7" class="cart">&nbsp;</p>
    </div>

    <style><!--
    .cart{position:absolute; z-index:1; filter:grayscale(1); transition:all 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #cart1{box-sizing:border-box; width:60vw; height:10vw; border:0.4vh ridge white; background:url('http://ekladata.com/h_0pe8IMganE6xO5jDjjRJc4y1I.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #cart2{box-sizing:border-box; width:12vw; height:13.75vw; border:0.4vh ridge white; background:url('http://ekladata.com/2O4krpfUZH0S3JaWg9Ka3mowCu8.jpg'); background-size:60vw 33.75vw; background-position:0vw -10vw; transform:translate(0vw,10vw);}
    #cart3{box-sizing:border-box; width:12vw; height:13.75vw; border:0.4vh ridge white; background:url('http://ekladata.com/nA7fDlWEAFml1jH7tv3Z-qWowO8.jpg'); background-size:60vw 33.75vw; background-position:-12vw -10vw; transform:translate(12vw,10vw);}
    #cart4{box-sizing:border-box; width:12vw; height:13.75vw; border:0.4vh ridge white; background:url('http://ekladata.com/Du0JHnVZfIKcMrmgFdgirkPU06M.jpg'); background-size:60vw 33.75vw; background-position:-24vw -10vw; transform:translate(24vw,10vw);}
    #cart5{box-sizing:border-box; width:12vw; height:13.75vw; border:0.4vh ridge white; background:url('http://ekladata.com/ysbnOyENk-TC6LOYKtgWDIdZyR0.jpg'); background-size:60vw 33.75vw; background-position:-36vw -10vw; transform:translate(36vw,10vw);}
    #cart6{box-sizing:border-box; width:12vw; height:13.75vw; border:0.4vh ridge white; background:url('http://ekladata.com/9_dfBeYGWYFfrkuFPYmqmMv-HY0.jpg'); background-size:60vw 33.75vw; background-position:-48vw -10vw; transform:translate(48vw,10vw);}
    #cart7{box-sizing:border-box; width:60vw; height:10vw; border:0.4vh ridge white; background:url('http://ekladata.com/sFAS8RsMWZWl7ZgAFqnB88XtN0k.jpg'); background-size:60vw 33.75vw; background-position:0vw -23.75vw; transform:translate(0vw,23.75vw);}
    #cart1:active,#cart2:active,#cart3:active,#cart4:active,#cart5:active,#cart6:active,#cart7:active{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    --></style>