• Exemple 71

    1+8 images au ratio 16/9, redimensionnées en 1152x648pxpar le code. Survol vignettes de droite.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/8AWmu4wTY-HMnDKmLz_N_h8Fdjw@1152x648.jpg'); background-size: cover;">
    <p id="sect1a" class="sect">&nbsp;</p>
    <p id="sect1" class="sect">&nbsp;</p>
    <p id="sect2a" class="sect">&nbsp;</p>
    <p id="sect2" class="sect">&nbsp;</p>
    <p id="sect3a" class="sect">&nbsp;</p>
    <p id="sect3" class="sect">&nbsp;</p>
    <p id="sect4a" class="sect">&nbsp;</p>
    <p id="sect4" class="sect">&nbsp;</p>
    <p id="sect5a" class="sect">&nbsp;</p>
    <p id="sect5" class="sect">&nbsp;</p>
    <p id="sect6a" class="sect">&nbsp;</p>
    <p id="sect6" class="sect">&nbsp;</p>
    <p id="sect7a" class="sect">&nbsp;</p>
    <p id="sect7" class="sect">&nbsp;</p>
    <p id="sect8a" class="sect">&nbsp;</p>
    <p id="sect8" class="sect">&nbsp;</p>
    </div>

    <style><!--
    .sect{position:absolute; z-index:1; width:8vw; height:8vw; border-radius:50%; 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;}
    #sect1{background:url('http://ekladata.com/CTuh1DQcm3qdgn8p2-tiuB1WVHU@1152x648.jpg'); background-position:0vw 0vw; transform:translate(5vw,5vw);}
    #sect1a{background:url('http://ekladata.com/CTuh1DQcm3qdgn8p2-tiuB1WVHU@1152x648.jpg'); background-position:30vw 0vw; transform:translate(45vw,2vw);}
    #sect2{background:url('http://ekladata.com/SKhDbgNYuC-iMBC2UXHk1GNKrA0@1152x648.jpg'); background-position:0vw 0vw; transform:translate(10vw,15vw);}
    #sect2a{background:url('http://ekladata.com/SKhDbgNYuC-iMBC2UXHk1GNKrA0@1152x648.jpg'); background-position:30vw 0vw; transform:translate(35vw,10vw);}
    #sect3{background:url('http://ekladata.com/-eFwe75sjPJ6C-fYlKxEBW3hM00@1152x648.jpg'); background-position:0vw 0vw; transform:translate(15vw,10vw);}
    #sect3a{background:url('http://ekladata.com/-eFwe75sjPJ6C-fYlKxEBW3hM00@1152x648.jpg'); background-position:30vw 0vw; transform:translate(45vw,20vw);}
    #sect4{background:url('http://ekladata.com/1GOfeKEbFs6xpMv_n3RpI-x-Dtg@1152x648.jpg'); background-position:0vw 0vw; transform:translate(20vw,20vw);}
    #sect4a{background:url('http://ekladata.com/1GOfeKEbFs6xpMv_n3RpI-x-Dtg@1152x648.jpg'); background-position:30vw 0vw; transform:translate(34vw,25vw);}
    #sect5{background:url('http://ekladata.com/r3yLdh0t6Z3lijwUGlhfB9lQL5g@1152x648.jpg'); background-position:0vw 0vw; transform:translate(8vw,2vw);}
    #sect5a{background:url('http://ekladata.com/r3yLdh0t6Z3lijwUGlhfB9lQL5g@1152x648.jpg'); background-position:30vw 0vw; transform:translate(45vw,10vw);}
    #sect6{background:url('http://ekladata.com/wcXUJjwLMm5bs_N96wUgATo8Wk0@1152x648.jpg'); background-position:0vw 0vw; transform:translate(1vw,24vw);}
    #sect6a{background:url('http://ekladata.com/wcXUJjwLMm5bs_N96wUgATo8Wk0@1152x648.jpg'); background-position:30vw 0vw; transform:translate(35vw,2vw);}
    #sect7{background:url('http://ekladata.com/xFcwexg__5NXp9qtvCzNFvSNpjI@1152x648.jpg'); background-position:0vw 0vw; transform:translate(10vw,22vw);}
    #sect7a{background:url('http://ekladata.com/xFcwexg__5NXp9qtvCzNFvSNpjI@1152x648.jpg'); background-position:30vw 0vw; transform:translate(37vw,18vw);}
    #sect8{background:url('http://ekladata.com/R2En02CYTmTfrRr5vALwaayOSu8@1152x648.jpg'); background-position:0vw 0vw; transform:translate(20vw,2vw);}
    #sect8a{background:url('http://ekladata.com/R2En02CYTmTfrRr5vALwaayOSu8@1152x648.jpg'); background-position:30vw 0vw; transform:translate(50vw,12vw);}

    #sect1a:hover,#sect2a:hover,#sect3a:hover,#sect4a:hover,#sect5a:hover,#sect6a:hover,#sect7a:hover,#sect8a:hover{z-index:5; width:30vw; height:33.75vw; transform:translate(30vw,0vw) rotate(0deg);border:none; border-radius:0%; box-shadow:none;}
    #sect1a:hover ~ #sect1,#sect2a:hover ~ #sect2,#sect3a:hover ~ #sect3,#sect4a:hover ~ #sect4,#sect5a:hover ~ #sect5,#sect6a:hover ~ #sect6,#sect7a:hover ~ #sect7,#sect8a:hover ~ #sect8{z-index:5; width:30vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg); border:none;border-radius:0%; box-shadow:none;}
    --></style>