• Montage 10

    Toujours sur le même principe:

    un cadre de 60% de la largeur de l'écran de lecture, au ratio 16/9;

    Une image en fond de la dimension du cadre; ici, elle n'est pas en fond de cadre mais le résultat est le même.

    Des images au dessus, réduites en dimension et positionnées individuellement; chacune affiche la partie de l'image correspondant à sa position pour que l'image s'agrandisse à partir de la partie affichée.

    La forme et la dimension des vignettes sont à votre convenance.

    L'animation au clic maintenu est la même pour chaque image.

     

     

     

     

     

     

     

     

     

     

     

     

    Clic maintenu.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white;">
    <p id="ph0">&nbsp;</p>
    <p id="ph1" class="ph">&nbsp;</p>
    <p id="ph2" class="ph">&nbsp;</p>
    <p id="ph3" class="ph">&nbsp;</p>
    <p id="ph4" class="ph">&nbsp;</p>
    <p id="ph5" class="ph">&nbsp;</p>
    <p id="ph6" class="ph">&nbsp;</p>
    <p id="ph7" class="ph">&nbsp;</p>
    <p id="ph8" class="ph">&nbsp;</p>
    <p id="ph9" class="ph">&nbsp;</p>
    <p id="ph10" class="ph">&nbsp;</p>
    <p id="ph11">Clic maintenu.</p>
    </div>

    <style><!--
    #ph0{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/gOqPh4aweM-roehpibgxUUUXu9A.jpg'); background-size:cover;}
    .ph{position:absolute; z-index:2; box-sizing:border-box; width:2vw; height:4vw; border:0.3vh solid white; transition:all 1s linear;}
    #ph1{background:url('http://ekladata.com/SLs_erjDJ_37WVMDePLrAgZPXaE.jpg'); background-size:60vw 33.75vw; background-position:0vw -2vw; transform:translate(0vw,2vw);box-sizing:border-box;}
    #ph2{background:url('http://ekladata.com/Ckj_waIzvp5219Xy0l3aEiPXjII.jpg'); background-size:60vw 33.75vw; background-position:0vw -8vw; transform:translate(0vw,8vw);box-sizing:border-box;}
    #ph3{background:url('http://ekladata.com/9xOhiI3J3pBYqRzaKlftDmiUM9Y.jpg'); background-size:60vw 33.75vw; background-position:0vw -14vw; transform:translate(0vw,14vw);box-sizing:border-box;}
    #ph4{background:url('http://ekladata.com/JOeYaySpimEWei4sjGvgeLl0GPA.jpg'); background-size:60vw 33.75vw; background-position:0vw -20vw; transform:translate(0vw,20vw);box-sizing:border-box;}
    #ph5{background:url('http://ekladata.com/CSxybhDtiKJ-kCBPVPduxIFI9QY.jpg'); background-size:60vw 33.75vw; background-position:0vw -26vw; transform:translate(0vw,26vw);box-sizing:border-box;}
    #ph6{background:url('http://ekladata.com/9b_UrTfIOB3fVI6KEqz86uhNRgc.jpg'); background-size:60vw 33.75vw; background-position:-58vw -2vw; transform:translate(58vw,2vw);box-sizing:border-box;}
    #ph7{background:url('http://ekladata.com/qEDBa4IZFiU26GEobHiAhf2OpJk.jpg'); background-size:60vw 33.75vw; background-position:-58vw -8vw; transform:translate(58vw,8vw);box-sizing:border-box;}
    #ph8{background:url('http://ekladata.com/FgEWM0doN9nUek7_XIFO_8om5rc.jpg'); background-size:60vw 33.75vw; background-position:-58vw -14vw; transform:translate(58vw,14vw);box-sizing:border-box;}
    #ph9{background:url('http://ekladata.com/_3WsS8ARc8OSOFB6WDkER-H5RX4.jpg'); background-size:60vw 33.75vw; background-position:-58vw -20vw; transform:translate(58vw,20vw);box-sizing:border-box;}
    #ph10{background:url('http://ekladata.com/KOHnf2iC3e3vwWFuK5zNYs3jR8o.jpg'); background-size:60vw 33.75vw; background-position:-58vw -26vw; transform:translate(58vw,26vw);box-sizing:border-box;}
    #ph11{position:absolute; z-index:1; width:20vw; text-align:center; font-size:2vw; color:white; transform:translate(20vw,30vw);}
    #ph1:active,#ph2:active,#ph3:active,#ph4:active,#ph5:active,#ph6:active,#ph7:active,#ph8:active,#ph9:active,#ph10:active{z-index:10; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>