• Valériane

    Code en 60vw de l'article publié en 80vw, pour 12 images au ratio 16/9 mais le nombre peut-être adapté.

    Clic maintenu sur chaque vignette.

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="val1" class="val">&nbsp;</p>
    <p id="val2" class="val">&nbsp;</p>
    <p id="val3" class="val">&nbsp;</p>
    <p id="val4" class="val">&nbsp;</p>
    <p id="val5" class="val">&nbsp;</p>
    <p id="val6" class="val">&nbsp;</p>
    <p id="val7" class="val">&nbsp;</p>
    <p id="val8" class="val">&nbsp;</p>
    <p id="val9" class="val">&nbsp;</p>
    <p id="val10" class="val">&nbsp;</p>
    <p id="val11" class="val">&nbsp;</p>
    <p id="val12" class="val">&nbsp;</p>
    </div>

    <style><!--
    .val{position:absolute; z-index:1; box-sizing:border-box; width:15vw; height:11.25vw; border:0.5vh solid white; -webkit-filter:grayscale(1); filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, filter 1s linear 1s;}
    #val1{background:url('http://ekladata.com/m0HvDndeWK1r429YvbiXQ1nx28w@1152x648.jpg'); background-size:cover; transform:translate(0vw,0vw);}
    #val2{background:url('http://ekladata.com/ker0zJKoaUFWOWp2isrE4Rl92Yw@1152x648.jpg'); background-size:cover; transform:translate(15vw,0vw);}
    #val3{background:url('http://ekladata.com/rufg9AdmCFLC40SR5ASy8PvALHA@1152x648.jpg'); background-size:cover; transform:translate(30vw,0vw);}
    #val4{background:url('http://ekladata.com/CBGwrtCJYz1Khx__Px4Ic_kFyVU@1152x648.jpg'); background-size:cover; transform:translate(45vw,0vw);}
    #val5{background:url('http://ekladata.com/sXvOJE_xJyon7xFNOBeZCL2OycE@1152x648.jpg'); background-size:cover; transform:translate(0vw,11.25vw);}
    #val6{background:url('http://ekladata.com/9FhFyUwygrWr_7MvNl-hLYS4NF4@1152x648.jpg'); background-size:cover; transform:translate(15vw,11.25vw);}
    #val7{background:url('http://ekladata.com/e623kWINJP0qvxcE1pVqB1kMTnE@1152x648.jpg'); background-size:cover; transform:translate(30vw,11.25vw);}
    #val8{background:url('http://ekladata.com/PHujxFTh-akRrZQqliHTvAgxH8g@1152x648.jpg'); background-size:cover; transform:translate(45vw,11.25vw);}
    #val9{background:url('http://ekladata.com/J3CupvIIIP4-07dJpOlsLQo09Ks@1152x648.jpg'); background-size:cover; transform:translate(0vw,22.5vw);}
    #val10{background:url('http://ekladata.com/BjTbWs3AtD5SIx9EDUlAT-sO2wo@1152x648.jpg'); background-size:cover; transform:translate(15vw,22.5vw);}
    #val11{background:url('http://ekladata.com/5GBzz7m3DSzIwU28KfE8ROO2TeU@1152x648.jpg'); background-size:cover; transform:translate(30vw,22.5vw);}
    #val12{background:url('http://ekladata.com/p_fRhETS6RXZN2AriGLSa_JXOVo@1152x648.jpg'); background-size:cover; transform:translate(45vw,22.5vw);}

    #val1:active ,#val2:active,#val3:active,#val4:active,#val5:active,#val6:active,#val7:active,#val8:active,#val9:active,#val10:active,#val11:active,#val12:active{z-index:10; transform:translate(0vw,0vw); width:60vw; height:33.75vw; -webkit-filter:grayscale(0); filter:grayscale(0);}
    --></style>


    Quelles que soient les dimensions de vos images au ratio 16/9, elles sont redimensionnées en 1152x648px par l'ajout, dans leur adresse de @1152x648 avant le .jpg

    Ne remplacez, dans mes adresses, que la partie surlignée en beige clair, par la partie de vos adresses avant le .jpg