• Montage 112

    En regardant mon carrelage ! Le nombre d'images verticales et horizontales peut être adapté de même que leur position.

    Clic maintenu

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="exp">Clic maintenu</p>
    <p id="car1" class="car">&nbsp;</p>
    <p id="car2" class="car">&nbsp;</p>
    <p id="car3" class="car">&nbsp;</p>
    <p id="car4" class="car">&nbsp;</p>
    <p id="car5" class="car">&nbsp;</p>
    <p id="car6" class="car">&nbsp;</p>
    <p id="car7" class="car">&nbsp;</p>
    <p id="car8" class="car">&nbsp;</p>
    <p id="car9" class="car">&nbsp;</p>
    <p id="car10" class="car">&nbsp;</p>
    <p id="car11" class="car">&nbsp;</p>
    </div>

    <style><!--
    #exp{position:absolute; z-index:1; width:12vw; text-align:center; font-size:1.2vw; transform:translate(24vw,0vw);}
    .car{position:absolute; z-index:1; width:20vw; height:10vw; border:0.6vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
    #car1{width:10vw; box-sizing:border-box; background:url('http://ekladata.com/Ziz13jJY4pcMux5K4ZeN5vcjsL8.jpg');background-size:cover; transform:translate(0vw,3.75vw);}
    #car2{box-sizing: border-box; background:url('http://ekladata.com/KNy_aKXE_K2W7aEA2BYm-HIaWj4.jpg'); background-size:cover; transform:translate(10vw,3.75vw);}
    #car3{box-sizing: border-box; background:url('http://ekladata.com/Y15el_M1FXibQ3pH7Cwpz46WzBY.jpg'); background-size:cover; transform:translate(30vw,3.75vw);}
    #car4{width:10vw; box-sizing:border-box; background:url('http://ekladata.com/07yVpJX7K_ySEM2IpXsIdm5eLBc.jpg'); background-size:cover; transform:translate(50vw,3.75vw);}

    #car5{box-sizing:border-box; background:url('http://ekladata.com/WNZUFmVUk65JVqGprwd_r_ykaE4.jpg'); background-size:cover; transform:translate(0vw,13.75vw);}
    #car6{box-sizing:border-box; background:url('http://ekladata.com/nezNPpOP0uRTGjSHOto3v_6s9aY.jpg'); background-size:cover; transform:translate(20vw,13.75vw);}
    #car7{box-sizing:border-box; background:url('http://ekladata.com/yWDb3xYzdaVaNX3Y0wshjHu1_EA.jpg'); background-size:cover; transform:translate(40vw,13.75vw);}

    #car8{width:10vw; box-sizing:border-box; background:url('http://ekladata.com/fA2Izwj8B9Qnor2lTBGL5zxCq6k.jpg'); background-size:cover; transform:translate(0vw,23.75vw);}
    #car9{box-sizing:border-box; background:url('http://ekladata.com/VTrYxG-aeTV05OrfzC6UHanauSM.jpg'); background-size:cover; transform:translate(10vw,23.75vw);}
    #car10{box-sizing:border-box; background:url('http://ekladata.com/El4u_VLARpDbjQeGXBt1HDyzQ2c.jpg'); background-size:cover; transform:translate(30vw,23v.75w);}
    #car11{width:10vw; box-sizing:border-box; background:url('http://ekladata.com/n4iMia6Q9pCD3CRIzeiL5zXggxY.jpg'); background-size:cover; transform:translate(50vw,23.75vw);}

    #car1:active,#car2:active,#car3:active,#car4:active,#car8:active,#car9:active,#car10:active,#car11:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    #car5:active,#car6:active,#car7:active{z-index:5; width:19vw; height:33.75vw; transform:translate(20vw,0vw); background-position:0vw 0vw;}
    --></style>