• Montage 49

    Mon exemple est pour 15 images, 5 verticales(486x864px) et 10 horizontales (1151x647px) mais le nombre d'images peut-être adapté à vos besoins.

    Le code est bien long car chaque vignette doit être positionnée en indépendant mais les lignes sont répétitives sur le principe.

    Les adresses des images sont en rouge dans le code; elles sont hébergées en galerie Ekla en 1920x1080px et redimensionnées dans le code par @486x864 pour les verticales et en @1151x648 pour les horizontales.

    Clic sur chaque bouton puis survol de chaque vignette.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; background: url('http://ekladata.com/7f4xUwQ9DobCZ-xXjR0AgBrZGtc@1151x648.jpg'); background-size: cover; margin: 1vh auto;"><input id="pq1a" class="pq1" type="text" value="1" /><input id="pq2a" class="pq1" type="text" value="2" /><input id="pq3a" class="pq1" type="text" value="3" />
    <p id="exp">Clic sur chaque bouton puis survol de chaque vignette.</p>
    <p id="pq1b" class="pq1">&nbsp;</p>
    <p id="pq1c" class="pq1">&nbsp;</p>
    <p id="pq1d" class="pq1">&nbsp;</p>
    <p id="pq1e" class="pq1">&nbsp;</p>
    <p id="pq1f" class="pq1">&nbsp;</p>
    <p id="pq2b" class="pq1">&nbsp;</p>
    <p id="pq2c" class="pq1">&nbsp;</p>
    <p id="pq2d" class="pq1">&nbsp;</p>
    <p id="pq2e" class="pq1">&nbsp;</p>
    <p id="pq2f" class="pq1">&nbsp;</p>
    <p id="pq3b" class="pq1">&nbsp;</p>
    <p id="pq3c" class="pq1">&nbsp;</p>
    <p id="pq3d" class="pq1">&nbsp;</p>
    <p id="pq3e" class="pq1">&nbsp;</p>
    <p id="pq3f" class="pq1">&nbsp;</p>
    </div>
    <style><!--
    #exp{position:absolute; z-index:1; width:25vw; height:5vw; text-align:center; background:rgba(0,0,0,0.5); font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(35vw,28vw);}
    .pq1{position:absolute; width:4vw; height:8vw; border-radius:50%; transition:all 1s linear;}
    #pq1a{z-index:5; transform:translate(0vw,1vw); text-align:center; line-height:8vw; font-size:4vw; color:white!important; box-shadow:0.2vh 0.2vh 0.4vh black; text-shadow:0.1vh 0.1vh black; background:linear-gradient(to bottom, #088A29 0%, #F7BE81 100%);}
    #pq1b{z-index:1; box-sizing:border-box; border:0.3vh solid white;transform:translate(0vw,1vw); background:url('http://ekladata.com/V_wkvAsRHS5fprdE-ApfwJVo-lQ@486x864.jpg'); background-size:cover;}
    #pq1c{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,1vw); background:url('http://ekladata.com/xTMQfLmwl3QsUkoT4Do-9Ldqxu0@486x864.jpg'); background-size:cover;}
    #pq1d{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,1vw); background:url('http://ekladata.com/PWCXuJ6gdCSVE6sC-2QHws_uVnI@486x864.jpg'); background-size:cover;}
    #pq1e{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,1vw); background:url('http://ekladata.com/SW17nCwqUsrXiwGz3tnYZt0xdzE@486x864.jpg'); background-size:cover;}
    #pq1f{ z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,1vw); background:url('http://ekladata.com/16fvM3zUeBLOu37na9L3DBsBp-I@486x864.jpg'); background-size:cover;}
    #pq1a:focus ~ #pq1b{position:absolute; transform:translate(10vw,1vw);}
    #pq1a:focus ~ #pq1c{transform:translate(20vw,1vw);}
    #pq1a:focus ~ #pq1d{transform:translate(30vw,1vw);}
    #pq1a:focus ~ #pq1e{transform:translate(40vw,1vw);}
    #pq1a:focus ~ #pq1f{transform:translate(50vw,1vw);}
    #pq1b:hover{z-index:10; margin:-1vw -8vw; width:20vw; height:33.75vw; border-radius:0%;}
    #pq1c:hover{z-index:10; margin:-1vw -8vw; width:20vw; height:33.75vw; border-radius:0%;}
    #pq1d:hover{z-index:10; margin:-1vw -8vw; width:20vw; height:33.75vw; border-radius:0%;}
    #pq1e:hover{z-index:10; margin:-1vw -8vw; width:20vw; height:33.75vw; border-radius:0%;}
    #pq1f:hover{z-index:10; margin:-1vw -10vw; width:20vw; height:33.75vw; border-radius:0%;}
    #pq2a{z-index:5; transform:translate(0vw,11vw); text-align:center; line-height:8vw; font-size:4vw; color:white!important; box-shadow:0.2vh 0.2vh 0.4vh black; text-shadow:0.1vh 0.1vh black; background:linear-gradient(to bottom, #088A29 0%, #F7BE81 100%);}
    #pq2b{z-index:1; box-sizing:border-box; border:0.3vh solid white;transform:translate(0vw,11vw); background:url('http://ekladata.com/142egIGCX03VgPZJCfdCsSGvc1k@1151x648.jpg'); background-size:cover;}
    #pq2c{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,11vw); background:url('http://ekladata.com/6-KMloWViyFVMNfuiRKNPiXQLgU@1151x648.jpg'); background-size:cover;}
    #pq2d{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,11vw); background:url('http://ekladata.com/OIdIwHiCJ2rOcAwlU7vrmj-Z4Rk@1151x648.jpg'); background-size:cover;}
    #pq2e{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,11vw); background:url('http://ekladata.com/--3LH2mAcOS8GaUInWBdBqchqUg@1151x648.jpg'); background-size:cover;}
    #pq2f{ z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,11vw); background:url('http://ekladata.com/5ERxJC18ET9oMcJbY4N6g_0BpqY@1151x648.jpg'); background-size:cover;}
    #pq2a:focus ~ #pq2b{transform:translate(10vw,11vw);}
    #pq2a:focus ~ #pq2c{transform:translate(20vw,11vw);}
    #pq2a:focus ~ #pq2d{transform:translate(30vw,11vw);}
    #pq2a:focus ~ #pq2e{transform:translate(40vw,11vw);}
    #pq2a:focus ~ #pq2f{transform:translate(50vw,11vw);}
    #pq2b:hover{z-index:10; margin:-11vw -10vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq2c:hover{z-index:10; margin:-11vw -20vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq2d:hover{z-index:10; margin:-11vw -30vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq2e:hover{z-index:10; margin:-11vw -40vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq2f:hover{z-index:10; margin:-11vw -50vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq3a{z-index:5; transform:translate(0vw,21vw); text-align:center; line-height:8vw; font-size:4vw; color:white!important; box-shadow:0.2vh 0.2vh 0.4vh black; text-shadow:0.1vh 0.1vh black; background:linear-gradient(to bottom, #088A29 0%, #F7BE81 100%);}
    #pq3b{z-index:1; box-sizing:border-box; border:0.3vh solid white;transform:translate(0vw,21vw); background:url('http://ekladata.com/RbkeeDpHkNtRUk8YLXQqz7vEjig@1151x648.jpg'); background-size:cover;}
    #pq3c{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,21vw); background:url('http://ekladata.com/odeQ2di6Ox6RgLvaffuXjj_CDvc@1151x648.jpg'); background-size:cover;}
    #pq3d{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,21vw); background:url('http://ekladata.com/cqc1ZaSbxB6Mp6h_lLYT093WVkk@1151x648.jpg'); background-size:cover;}
    #pq3e{z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,21vw); background:url('http://ekladata.com/wsSbTbLHcdd-pDOKAkEk94cKJ94@1151x648.jpg'); background-size:cover;}
    #pq3f{ z-index:1;box-sizing:border-box; border:0.3vh solid white; transform:translate(0vw,21vw); background:url('http://ekladata.com/asaj3-RvJoXhvEeh49WxNfRTsbY@1151x648.jpg'); background-size:cover;}
    #pq3a:focus ~ #pq3b{transform:translate(10vw,21vw);}
    #pq3a:focus ~ #pq3c{transform:translate(20vw,21vw);}
    #pq3a:focus ~ #pq3d{transform:translate(30vw,21vw);}
    #pq3a:focus ~ #pq3e{transform:translate(40vw,21vw);}
    #pq3a:focus ~ #pq3f{transform:translate(50vw,21vw);}
    #pq3b:hover{z-index:10; margin:-21vw -10vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq3c:hover{z-index:10; margin:-21vw -20vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq3d:hover{z-index:10; margin:-21vw -30vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq3e:hover{z-index:10; margin:-21vw -40vw; width:60vw; height:33.75vw; border-radius:0%;}
    #pq3f:hover{z-index:10; margin:-21vw -50vw; width:60vw; height:33.75vw; border-radius:0%;}
    --></style>