• Montage 11bis

    Sur le principe du montage 11, on peut varier la présentation.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Le survol d'une vignette l'affiche dans le cadre central et le clic maintenu sur la vignette agrandit l'image centrale.


    Code en 60vw par 33.75vw:

    <div style="width: 60vw; height: 33.75vw; border: 0.2vh solid black; margin: 1vh auto; background: radial-gradient(ellipse at center, #d5cea6 0%,#aa8f7b 49%,#d5cea6 100%);">
    <p id="mq1" class="mq">&nbsp;</p>
    <p id="mq2" class="mq">&nbsp;</p>
    <p id="mq3" class="mq">&nbsp;</p>
    <p id="mq4" class="mq">&nbsp;</p>
    <p id="mq5" class="mq">&nbsp;</p>
    <p id="mq6" class="mq">&nbsp;</p>
    <p id="mq7" class="mq">&nbsp;</p>
    <p id="mq8" class="mq">&nbsp;</p>
    <p id="fon1" class="fon">&nbsp;</p>
    <p id="fon2" class="fon">&nbsp;</p>
    <p id="fon3" class="fon">&nbsp;</p>
    <p id="fon4" class="fon">&nbsp;</p>
    <p id="fon5" class="fon">&nbsp;</p>
    <p id="fon6" class="fon">&nbsp;</p>
    <p id="fon7" class="fon">&nbsp;</p>
    <p id="fon8" class="fon">&nbsp;</p>
    <p id="fon0">&nbsp;</p>
    <p id="ex"><span style="background-color: #00ff00;">Le survol d'une vignette</span> l'affiche dans le cadre central et <span style="background-color: #00ffff;">le clic maintenu</span> sur la vignette agrandit l'image centrale.</p>
    </div>
    <style><!--
    .mq{position:absolute; z-index:10; width:6vw; height:6vw;}
    #mq1{transform:translate(1vw,1vw);}
    #mq2{transform:translate(1vw,8vw);}
    #mq3{transform:translate(1vw,15vw);}
    #mq4{transform:translate(1vw,22vw);}
    #mq5{transform:translate(53vw,1vw);}
    #mq6{transform:translate(53vw,8vw);}
    #mq7{transform:translate(53vw,15vw);}
    #mq8{transform:translate(53vw,22vw);}

    .fon{position:absolute; z-index:1; width:9vw; height:9vw; border:0.2vw solid white; border-radius:50%; box-shadow:0.4vh 0.4vh 0.6vh black;}
    #fon1{box-sizing:border-box; background:url('http://ekladata.com/MOckkgSR9Ct-1Jj3vX8o1uqwA_k.jpg'); background-size:cover; transform:translate(1vw,1vw);}
    #fon2{box-sizing:border-box; background:url('http://ekladata.com/jZjyWDdh0ys32yaY8HjRnp9xoNo.jpg'); background-size:cover; transform:translate(1vw,8vw);}
    #fon3{box-sizing:border-box; background:url('http://ekladata.com/N20P9gAc3qWKaPS_l25b4-yKR80.jpg'); background-size:cover; transform:translate(1vw,15vw);}
    #fon4{box-sizing:border-box; background:url('http://ekladata.com/--xHYtSK3dXgnXXhmLs6twv6h4c.jpg'); background-size:cover; transform:translate(1vw,22vw);}
    #fon5{box-sizing:border-box; background:url('http://ekladata.com/8Mq4LnLSUtbt957fE39lZUDVZyo.jpg'); background-size:cover; transform:translate(50vw,1vw);}
    #fon6{box-sizing:border-box; background:url('http://ekladata.com/B1KJyjD0ZxPhYiC1wu5wPb69Lpc.jpg'); background-size:cover; transform:translate(50vw,8vw);}
    #fon7{box-sizing:border-box; background:url('http://ekladata.com/EnkG0PWg9_xatadS_Ke4-iZuXVw.jpg'); background-size:cover; transform:translate(50vw,15vw);}
    #fon8{box-sizing:border-box; background:url('http://ekladata.com/-4q4tZBv-KmD3LSh2hmmCdm52-o.jpg'); background-size:cover; transform:translate(50vw,22vw);}

    #fon0{position:absolute; z-index:5; box-sizing:border:box; width:32vw; height:18vw; border-radius:50%; border:0.2vw solid white; box-shadow:0.4vh 0.4vh 0.8vh black; transform:translate(14vw,8vw); background: radial-gradient(ellipse at center, #c5deea 0%,#8abbd7 31%,#066dab 100%); transition:transform 1s linear, width 1s linear, height 1s linear, border-radius 1s linear 0s;}
    #ex{position:absolute; z-index:1; width:35vw;transform:translate(12vw,2vw); text-align:center; font-size:1vw;}

    #mq1:hover ~ #fon0{background:url('http://ekladata.com/MOckkgSR9Ct-1Jj3vX8o1uqwA_k.jpg'); background-size:cover;}
    #mq2:hover ~ #fon0{background:url('http://ekladata.com/jZjyWDdh0ys32yaY8HjRnp9xoNo.jpg'); background-size:cover;}
    #mq3:hover ~ #fon0{background:url('http://ekladata.com/N20P9gAc3qWKaPS_l25b4-yKR80.jpg'); background-size:cover;}
    #mq4:hover ~ #fon0{background:url('http://ekladata.com/--xHYtSK3dXgnXXhmLs6twv6h4c.jpg'); background-size:cover;}
    #mq5:hover ~ #fon0{background:url('http://ekladata.com/8Mq4LnLSUtbt957fE39lZUDVZyo.jpg'); background-size:cover;}
    #mq6:hover ~ #fon0{background:url('http://ekladata.com/B1KJyjD0ZxPhYiC1wu5wPb69Lpc.jpg'); background-size:cover;}
    #mq7:hover ~ #fon0{background:url('http://ekladata.com/EnkG0PWg9_xatadS_Ke4-iZuXVw.jpg'); background-size:cover;}
    #mq8:hover ~ #fon0{background:url('http://ekladata.com/-4q4tZBv-KmD3LSh2hmmCdm52-o.jpg'); background-size:cover;}
    #mq1:active ~ #fon0,#mq2:active ~ #fon0,#mq3:active ~ #fon0,#mq4:active ~ #fon0,#mq5:active ~ #fon0,#mq6:active ~ #fon0,#mq7:active ~ #fon0,#mq8:active ~ #fon0{transform:translate(0vw,0vw); width:60vw; height:33.75vw; border:none; border-radius:0%;}
    --></style>