• Img tailles différentes

    Une fidèle visiteuse publie des images de différentes tailles et ne peut donc utiliser les codes que je propose, qui sont tous avec des images au ratio 16/9 et en unités adaptatives, ce qui complique la conversion.
    J'ai fait quelques sélections sur mes images pour obtenir des images de tailles variables et j'ai ajusté la conversion en vw à la main, là où il faudrait calculer mais cela ne me semble pas indispensable.
    On peut donner à toutes la même hauteur et conserver la largeur en proportion ... à vous de voir.
    Le montage général est en 60vw/33.75vw (16/9); les vignettes ont la même taille mais c'est au choix.
    Survol vignettes


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;"><img id="v1" src="http://ekladata.com/ZLtdUiw3nOoiPrWDADVeY28ANt8.jpg" alt="" /> <img id="v2" src="http://ekladata.com/09fhY6V5QFHJuIhO0bOAzPvn0Dk.jpg" alt="" /> <img id="v3" src="http://ekladata.com/DKU-tfKD40G1BwSpphnnMSLeuCg.jpg" alt="" /> <img id="v4" src="http://ekladata.com/2j4xonC1NZo1sxe3w0PAbOBEpKw.jpg" alt="" /> <img id="v5" src="http://ekladata.com/hbidmdjMJGWmiMG-3TaEmyfLfs4.jpg" alt="" /> <img id="v6" src="http://ekladata.com/5Z9JoTGgGLzG0o1_nKv6etcGWmY.jpg" alt="" /><img id="v7" src="http://ekladata.com/iJy2Y_TA-puGsh0s6z4TJ-uqTNc.jpg" alt="" /> <img id="v8" src="http://ekladata.com/LoTjx3swAfnLF2DDShw-0WtbCxA.jpg" alt="" /><img id="v9" src="http://ekladata.com/nGRSbeSpkasUTE92tk82UucXXHY.jpg" alt="" /></div>
    <style><!--
    #v1{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(0vw,0vw); transition:all 1s linear;}
    #v1:hover{z-index:5; width:60vw; height:33.75vw;}
    #v2{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(10vw,0vw); transition:all 1s linear;}
    #v2:hover{z-index:5; width:32vw; height:33.75vw;transform:translate(2vw,0vw);}
    #v3{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(20vw,0vw); transition:all 1s linear;}
    #v3:hover{z-index:5; width:50vw; height:30vw;transform:translate(2vw,0vw);}
    #v4{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(30vw,0vw); transition:all 1s linear;}
    #v4:hover{z-index:5; width:20vw; height:30vw;transform:translate(25vw,0vw);}
    #v5{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(40vw,0vw); transition:all 1s linear;}
    #v5:hover{z-index:5; width:30vw; height:33.75vw;transform:translate(25vw,0vw);}
    #v6{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(50vw,0vw); transition:all 1s linear;}
    #v6:hover{z-index:5; width:60vw; height:33.75vw;transform:translate(0vw,0vw);}
    #v7{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(0vw,10vw); transition:all 1s linear;}
    #v7:hover{z-index:5; width:22vw; height:33.75vw;transform:translate(0vw,0vw);}
    #v8{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(10vw,10vw); transition:all 1s linear;}
    #v8:hover{z-index:5; width:60vw; height:33.75vw;transform:translate(0vw,0vw);}
    #v9{position:absolute; z-index:1; width:8vw; height:4.5vw;transform:translate(20vw,10vw); transition:all 1s linear;}
    #v9:hover{z-index:5; width:60vw; height:33.75vw;transform:translate(0vw,0vw);}
    --></style>


    Chaque image est positionnée en indépendant avec 2 lignes en CSS; au survol, la dimension relative et la position sont paramétrées.