• Montage 257

    8  images au ratio 16/9; clic maintenu.

    <div style="position: relative; width: 1000px; height: 563px; margin: 1vh auto; border: 4px solid grey; background: linear-gradient(to bottom, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%); text-align: left; overflow: hidden;">

    <img id="chp1" class="chp" src="http://ekladata.com/W4DJxODG9BeBfOGIH_BV9aSBvoI.jpg" alt="" />

    <img id="chp2" class="chp" src="http://ekladata.com/o0TDO5ox4aeaBi6F1EY8JZ5jw_w.jpg" alt="" />

    <img id="chp3" class="chp" src="http://ekladata.com/ZnRJ5JDoPoVnYil8uMmtno05SE8.jpg" alt="" />

    <img id="chp4" class="chp" src="http://ekladata.com/0eNHRXN-a34NgxJD1FbdWbC80F8.jpg" alt="" />

    <img id="chp5" class="chp" src="http://ekladata.com/UPKUY4cSHfboUviQO99ZnlbMy9Q.jpg" alt="" />

    <img id="chp6" class="chp" src="http://ekladata.com/YpCMOFZRD1PGT5EFXcTpgxqmL_Y.jpg" alt="" />

    <img id="chp7" class="chp" src="http://ekladata.com/2NGIyFNrnn3q2o5UcndQIT1L9iU.jpg" alt="" />

    <img id="chp8" class="chp" src="http://ekladata.com/20Cc8CG-NTeYQQmHuTMsu4D2w1E.jpg" alt="" />

    </div>

    <style><!--
    .chp{position:absolute; z-index:1; width:250px; height:150px; border:4px solid white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 1s, height 1s linear 1s, margin 1s linear 1s, filter 1s linear 2s;}
    #chp1{box-sizing:border-box; transform:translate(0px,0px) rotatey(180deg); margin:0 0 0 0;}
    #chp2{box-sizing:border-box; transform:translate(375px,0px) rotatey(180deg); margin:0 0 0 0;}
    #chp3{box-sizing:border-box; transform:translate(750px,0px) rotatey(180deg); margin:0 0 0 0;}
    #chp4{box-sizing:border-box; transform:translate(750px,206px) rotatey(180deg); margin:0 0 0 0;}
    #chp5{box-sizing:border-box; transform:translate(750px,413px) rotatey(180deg); margin:0 0 0 0;}
    #chp6{box-sizing:border-box; transform:translate(375px,413px) rotatey(180deg); margin:0 0 0 0;}
    #chp7{box-sizing:border-box; transform:translate(0px,413px) rotatey(180deg); margin:0 0 0 0;}
    #chp8{box-sizing:border-box; transform:translate(0px,206px) rotatey(180deg); margin:0 0 0 0;}
    #chp1:active,#chp2:active,#chp3:active,#chp4:active,#chp5:active,#chp6:active,#chp7:active,#chp8:active{z-index:5; width:1000px; height:563px; filter:grayscale(0); transform: translate(375px,206px) rotatey(0deg); margin:-206px 0 0 -375px;}
    --></style>