• Exemple 101

    Variante en rond avec juste un attribut à ajouter.

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="aze0">Survol</p>
    <p id="aze1" class="aze">&nbsp;</p>
    <p id="aze2" class="aze">&nbsp;</p>
    <p id="aze3" class="aze">&nbsp;</p>
    <p id="aze4" class="aze">&nbsp;</p>
    <p id="aze5" class="aze">&nbsp;</p>
    <p id="aze6" class="aze">&nbsp;</p>
    <p id="aze7" class="aze">&nbsp;</p>
    <p id="aze8" class="aze">&nbsp;</p>
    </div>
    <style><!--
    #aze0{position:absolute; z-index:1; transform:translate(27vw,16vw); font-size:1.5vw; color:coral; text-shadow:0.1vh 0.1vh black;}
    .aze{position:absolute; z-index:1; box-sizing:border-box; width:10vw; height:10vw; border-radius:50%; border:0.4vh solid white; box-shadow:inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; background-size:60vw 33.75vw; transition:all 1s linear;}
    #aze1{background:url('http://ekladata.com/0nGbu7IyJW8AhBYIVHs83qBd4Zo.jpg'); background-position:-25vw -2vw; transform:translate(25vw,2vw);}
    #aze2{background:url('http://ekladata.com/2ZW24_QnBBU5tMRNYgM3hf4b-e0.jpg'); background-position:-35vw -12vw; transform:translate(35vw,12vw);}
    #aze3{background:url('http://ekladata.com/4gafp9MYktF_3afoLrZjVwJLnr4.jpg'); background-position:-25vw -22vw; transform:translate(25vw,22vw);}
    #aze4{background:url('http://ekladata.com/aoGd9r0NP4BodBpgLx7jP0vY1OI.jpg'); background-position:-15vw -12vw; transform:translate(15vw,12vw);}
    #aze5{background:url('http://ekladata.com/ltqBg9UdfUVl8mW4or8vu7MAcVY.jpg'); background-position:-17.5vw -4.5vw; transform:translate(17.5vw,4.5vw) rotate(-45deg);}
    #aze6{background:url('http://ekladata.com/pGLZbEMEaKTJOYudUnhXlwjyb98.jpg'); background-position:-32vw -4.5vw; transform:translate(32vw,4.5vw) rotate(45deg);}
    #aze7{background:url('http://ekladata.com/chNBBCeVvYFEALVZyQg7FQFZLCo.jpg'); background-position:-32vw -19vw; transform:translate(32vw,19vw) rotate(-45deg);}
    #aze8{background:url('http://ekladata.com/XQQgpXdvpd_b4OGPAcyoIZDD_xQ.jpg'); background-position:-17.5vw -19vw; transform:translate(17.5vw,19vw) rotate(45deg);}
    #aze1:hover,#aze2:hover,#aze3:hover,#aze4:hover,#aze5:hover,#aze6:hover,#aze7:hover,#aze8:hover{z-index:5; width:60vw; height:33.75vw; border-radius:0%; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>