• Exemple 70

    1+8 images au ratio 16/9, redimensionnées par le code en 1152x648px. Survolez les vignettes de droite.

    Dans mon exemple, le survol de la vignette de droite 1 (haut) anime la vignette 5 de gauche et ainsi de suite dans le sens des aiguilles d'une montre:2/6.3/7.4/8.5/1.6/2.7/3.8/4.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/kaXIKvZBfzDC0uY7ztQ4TxtrzEs@1152x648.jpg'); background-size: cover;">
    <p id="typ1d" class="typ">&nbsp;</p>
    <p id="typ2d" class="typ">&nbsp;</p>
    <p id="typ3d" class="typ">&nbsp;</p>
    <p id="typ4d" class="typ">&nbsp;</p>
    <p id="typ5d" class="typ">&nbsp;</p>
    <p id="typ6d" class="typ">&nbsp;</p>
    <p id="typ7d" class="typ">&nbsp;</p>
    <p id="typ8d" class="typ">&nbsp;</p>
    <p id="typ1g" class="typ">&nbsp;</p>
    <p id="typ2g" class="typ">&nbsp;</p>
    <p id="typ3g" class="typ">&nbsp;</p>
    <p id="typ4g" class="typ">&nbsp;</p>
    <p id="typ5g" class="typ">&nbsp;</p>
    <p id="typ6g" class="typ">&nbsp;</p>
    <p id="typ7g" class="typ">&nbsp;</p>
    <p id="typ8g" class="typ">&nbsp;</p>
    </div>
    <style><!--
    .typ{position:absolute; z-index:1; width:6vw; height:4vw; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; background-size:80vw 45vw; transition:all 1s linear;}
    #typ1d{background:url('http://ekladata.com/j6JDfl_Qyy6pAwYoYOwXw2Mhfac@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(42vw,2vw);}
    #typ1g{background:url('http://ekladata.com/D4-n7yG61Qafh9hxLAS6HWsQjk0@1152x648.jpg'); background-position:0vw 0vw; transform:translate(12vw,2vw);}
    #typ2d{background:url('http://ekladata.com/ZGRrgSufzlWsisZRpvho6MFRad8@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(49vw,6vw) rotate(45deg);}
    #typ2g{background:url('http://ekladata.com/DljicBoQQVwuhK569PighBK7hy0@1152x648.jpg'); background-position:0vw 0vw; transform:translate(20vw,6vw) rotate(45deg);}
    #typ3d{background:url('http://ekladata.com/9KgzP5lsiG-VUf8nJEouOTSxz2s@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(52vw,15vw) rotate(90deg);}
    #typ3g{background:url('http://ekladata.com/UTR9A7n9YKWN173mOOcgGlx637U@1152x648.jpg'); background-position:0vw 0vw; transform:translate(23vw,15vw) rotate(90deg);}
    #typ4d{background:url('http://ekladata.com/3zR_86sgPSkGuRXAZo3UIjVP974@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(50vw,23vw) rotate(-45deg);}
    #typ4g{background:url('http://ekladata.com/-FzgNcmdaTz7yOUgMFLk7f3vFX0@1152x648.jpg'); background-position:0vw 0vw; transform:translate(20vw,24vw) rotate(-45deg);}
    #typ5d{background:url('http://ekladata.com/D4-n7yG61Qafh9hxLAS6HWsQjk0@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(42vw,27vw);}
    #typ5g{background:url('http://ekladata.com/j6JDfl_Qyy6pAwYoYOwXw2Mhfac@1152x648.jpg'); background-position:0vw 0vw; transform:translate(12vw,27vw);}
    #typ6d{background:url('http://ekladata.com/DljicBoQQVwuhK569PighBK7hy0@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(35vw,23vw) rotate(45deg);}
    #typ6g{background:url('http://ekladata.com/ZGRrgSufzlWsisZRpvho6MFRad8@1152x648.jpg'); background-position:0vw 0vw; transform:translate(3vw,24vw) rotate(45deg);}
    #typ7d{background:url('http://ekladata.com/UTR9A7n9YKWN173mOOcgGlx637U@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(32vw,15vw) rotate(90deg);}
    #typ7g{background:url('http://ekladata.com/9KgzP5lsiG-VUf8nJEouOTSxz2s@1152x648.jpg'); background-position:0vw 0vw; transform:translate(1vw,15vw) rotate(90deg);}
    #typ8d{background:url('http://ekladata.com/-FzgNcmdaTz7yOUgMFLk7f3vFX0@1152x648.jpg'); background-position:-30vw 0vw; transform:translate(35vw,6vw) rotate(-45deg);}
    #typ8g{background:url('http://ekladata.com/3zR_86sgPSkGuRXAZo3UIjVP974@1152x648.jpg'); background-position:0vw 0vw; transform:translate(4vw,6vw) rotate(-45deg);}
    #typ1d:hover,#typ2d:hover,#typ3d:hover,#typ4d:hover,#typ5d:hover,#typ6d:hover,#typ7d:hover,#typ8d:hover{z-index:5; width:30vw; height:33.75vw; transform:translate(30vw,0vw) rotate(0deg); box-shadow:none;}
    #typ1d:hover ~ #typ5g,#typ2d:hover ~ #typ6g,#typ3d:hover ~ #typ7g,#typ4d:hover ~ #typ8g,#typ5d:hover ~ #typ1g,#typ6d:hover ~ #typ2g,#typ7d:hover ~ #typ3g,#typ8d:hover ~ #typ4g{z-index:5; width:30vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg); box-shadow:none;}
    --></style>