• Exemple 53

    8 images au ratio 16/9 dimensionnées par le code en 1152x648px.

    Survol.

     

     

     

     

     

     

     

     

    <div style="width:60vw; height:33.75vw; margin:1vh auto;">
    <p id="sec1" class="sec">&nbsp;</p>
    <p id="sec2" class="sec">&nbsp;</p>
    <p id="sec3" class="sec">&nbsp;</p>
    <p id="sec4" class="sec">&nbsp;</p>
    <p id="sec5" class="sec">&nbsp;</p>
    <p id="sec6" class="sec">&nbsp;</p>
    <p id="sec7" class="sec">&nbsp;</p>
    <p id="sec8" class="sec">&nbsp;</p>
    </div>
    <style><!--
    .sec{position:absolute; z-index:1; width:18vw; height:10vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1s linear;}
    #sec1{box-sizing:border-box; transform:translate(0vw,0vw); background:url('http://ekladata.com/B6EQ9Sf5KdBfg43eETNcqrfk7Xw@1152x648.jpg'); background-position:0vw 0vw;}
    #sec2{box-sizing:border-box; transform:translate(21vw,0vw); background:url('http://ekladata.com/zj-og5FJWdJSJ7UjrFI5tGCG0Fs@1152x648.jpg'); background-position:-21vw 0vw;}
    #sec3{box-sizing:border-box; transform:translate(42vw,0vw); background:url('http://ekladata.com/0De5BnpdHlmqOpqgSk5RXxMJZvs@1152x648.jpg'); background-position:-42vw 0vw;}
    #sec4{box-sizing:border-box; transform:translate(8vw,11vw); background:url('http://ekladata.com/4Jto6ZTaeQ_7aiHmtdnBbSutbw0@1152x648.jpg'); background-position:-8vw -11vw;}
    #sec5{box-sizing:border-box; transform:translate(32vw,11vw); background:url('http://ekladata.com/0aRzgc4BBeQ3JsWgdYKxQZDoGBw@1152x648.jpg'); background-position:-32vw -11vw;}
    #sec6{box-sizing:border-box; transform:translate(0vw,22vw); background:url('http://ekladata.com/-rlzunKzRmzYj-P1OHTeKDERvxU@1152x648.jpg'); background-position:-0vw -22vw;}
    #sec7{box-sizing:border-box; transform:translate(21vw,22vw); background:url('http://ekladata.com/D-Ees6gESCClDlTqWhWIh3SPNCQ@1152x648.jpg'); background-position:-21vw -22vw;}
    #sec8{box-sizing:border-box; transform:translate(42vw,22vw); background:url('http://ekladata.com/TyilKi36Xs3mr3RjWubqZrHHzz4@1152x648.jpg'); background-position:-42vw -22vw;}
    #sec1:hover,#sec2:hover,#sec3:hover,#sec4:hover,#sec5:hover,#sec6:hover,#sec7:hover,#sec8:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>