• Exemple découpe

    Une remarque m'est faite concernant le poids d'un montage avec différentes vignettes: l'image de base est chargée une fois et ensuite, chaque vignette en sélectionne une partie précise: le temps de transfert est donc celui de votre image et non ceux des x vignettes créées.

    Survoler la vignette visible pour faire apparaître celles en dessous; le cadre est facultatif.

     

     

     

     

     

     

     

     

     

     

     

    <div style="width:80vw; height:92vh; border:0.6vh ridge white; margin:2vh auto; background:linear-gradient(to bottom,rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);">
    <p id="zz1" class="zz">&nbsp;</p>
    <p id="zz2" class="zz">&nbsp;</p>
    <p id="zz3" class="zz">&nbsp;</p>
    <p id="zz4" class="zz">&nbsp;</p>
    <p id="zz5" class="zz">&nbsp;</p>
    <p id="zz6" class="zz">&nbsp;</p>
    <p id="zz7" class="zz">&nbsp;</p>
    <p id="zz8" class="zz">&nbsp;</p>
    <p id="zz9" class="zz">&nbsp;</p>
    <p id="zz10" class="zz">&nbsp;</p>
    <p id="zz11" class="zz">&nbsp;</p>
    </div>
    <style><!--
    .zz{background:url('http://ekladata.com/Rqna7aloN1H62BlqlatQvLYuqrU.jpg'); background-size:80vw 92vh;}
    #zz1{position:absolute; z-index:20; width:40vw; height:30vh; transform:translate(20vw,30vh); background-position:-20vw -30vh;}
    #zz2{position:absolute; z-index:19; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:0vw 0vh; transition:all 0.5s linear 0s;}
    #zz3{position:absolute; z-index:18; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:-20vw 0vh; transition:all 0.5s linear 0.5s;}
    #zz4{position:absolute; z-index:17; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:-40vw 0vh; transition:all 0.5s linear 1s;}
    #zz5{position:absolute; z-index:16; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:-60vw 0vh; transition:all 0.5s linear 1.5s;}
    #zz6{position:absolute; z-index:15; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:-60vw -30vh; transition:all 0.5s linear 2s;}
    #zz7{position:absolute; z-index:14; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:-60vw -60vh; transition:all 0.5s linear 2.5s;}
    #zz8{position:absolute; z-index:13; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:-40vw -60vh; transition:all 0.5s linear 3s;}
    #zz9{position:absolute; z-index:12; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position: -20vw -60vh; transition:all 0.5s linear 3.5s;}
    #zz10{position:absolute; z-index:11; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:0vw -60vh; transition:all 0.5s linear 4s;}
    #zz11{position:absolute; z-index:10; width:20vw; height:30vh; transform:translate(30vw,30vh); background-position:0vw -30vh; transition:all 0.5s linear 4.5s;}
    #zz1:hover ~ #zz2{transform:translate(0vw,0vh);}
    #zz1:hover ~ #zz3{transform:translate(20vw,0vh);}
    #zz1:hover ~ #zz4{transform:translate(40vw,0vh);}
    #zz1:hover ~ #zz5{transform:translate(60vw,0vh);}
    #zz1:hover ~ #zz6{transform:translate(60vw,30vh);}
    #zz1:hover ~ #zz7{transform:translate(60vw,60vh);height:32vh;}
    #zz1:hover ~ #zz8{transform:translate(40vw,60vh);height:32vh;}
    #zz1:hover ~ #zz9{transform:translate(20vw,60vh);height:32vh;}
    #zz1:hover ~ #zz10{transform:translate(0vw,60vh);height:32vh;}
    #zz1:hover ~ #zz11{transform:translate(00vw,30vh);}
    --></style>

    L'adresse de l'image est placée dans la class (zz) des vignettes et dimensionnée aux dimensions du montage.

    Chaque vignette est invisible, derrière celle affichée et se déplace selon sa partie d'image en fond.

    La disposition et l'animation sont à votre choix.