• Exemple 20

    8 images horizontales, au ratio 16/9, hébergées en 1920x1080px et dimensionnées par le code en 1152x648px.

    3 images verticales, au ratio 16/9, hébergées en 486x864px et dimensionnées par le code en 365x648px.

    Survol

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.2vh solid brown; text-align: left; background: linear-gradient(to bottom,#F5D0A9 0%,#A9F5F2 100%);">
    <p id="vd0">Survol</p>
    <p id="vd1" class="vd">&nbsp;</p>
    <p id="vd2" class="vd">&nbsp;</p>
    <p id="vd3" class="vd">&nbsp;</p>
    <p id="vd4" class="vd">&nbsp;</p>
    <p id="vd5" class="vd">&nbsp;</p>
    <p id="vd6" class="vd">&nbsp;</p>
    <p id="vd7" class="vd">&nbsp;</p>
    <p id="vd8" class="vd">&nbsp;</p>
    <p id="vd9" class="vd">&nbsp;</p>
    <p id="vd10" class="vd">&nbsp;</p>
    <p id="vd11" class="vd">&nbsp;</p>
    </div>

    <style><!--
    #vd0{position:absolute; z-index:1; width:10vw; transform:translate(25vw,0.5vw); text-align:center; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh brown;}
    .vd{position:absolute; z-index:1; width:4vw; height:10vw; box-shadow:0.2vh 0.2vh 0.4vh black, inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; transition:all 1s linear;}
    #vd1{background:url('http://ekladata.com/IbtHKiEn9-LhoCOk8jAisGUfVu8@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-4vw -4.5vw; transform:translate(4vw,4.5vw);}
    #vd2{background:url('http://ekladata.com/sLEE280KqaBGLqjIhcQcQkUc5-E@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-4vw -19vw; transform:translate(4vw,19vw);}
    #vd3{background:url('http://ekladata.com/u8PhXAXGdzvPNQgYuBFI_4ik1yk@365x648.jpg'); background-size:19vw 33.75vw; background-position:-12vw -11.25vw; transform:translate(12vw,11.25vw);}
    #vd4{background:url('http://ekladata.com/7X3H_jDtMtlWLMp45TJ7ISQlQ3I@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-20vw -4.5vw; transform:translate(20vw,4.5vw);}
    #vd5{background:url('http://ekladata.com/LD0aATwAHWwv0loXAS_jtenArUw@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-20vw -19vw; transform:translate(20vw,19vw);}
    #vd6{background:url('http://ekladata.com/pL6CTEQ0KJVVVBNQfHmm67ADtWw@365x648.jpg'); background-size:19vw 33.75vw; background-position:-28vw -11.25vw; transform:translate(28vw,11.25vw);}
    #vd7{background:url('http://ekladata.com/hvC_Bi1ehGoAmGiyOq0sXK7-uNQ@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-36vw -4.5vw; transform:translate(36vw,4.5vw);}
    #vd8{background:url('http://ekladata.com/peuo3O6GmrspLaFsTCvBUU6lDno@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-36vw -19vw; transform:translate(36vw,19vw);}
    #vd9{background:url('http://ekladata.com/k97-Qw6FE8l2Uc99gAgZX9ogSQI@365x648.jpg'); background-size:19vw 33.75vw; background-position:-44vw -11.25vw; transform:translate(44vw,11.25vw);}
    #vd10{background:url('http://ekladata.com/ifHhebEuUmjd5ZmHFJFeES2Jy9o@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-52vw -4.5vw; transform:translate(52vw,4.5vw);}
    #vd11{background:url('http://ekladata.com/bwfv-mRuFTRK2dSKNWLVx9iBlLU@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-52vw -19vw; transform:translate(52vw,19vw);}
    #vd1:hover,#vd2:hover,#vd4:hover,#vd5:hover,#vd7:hover,#vd8:hover,#vd10:hover,#vd11:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #vd3:hover{z-index:5; width:19vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #vd6:hover{z-index:5; width:19vw; height:33.75vw; background-position:-19vw 0vw; transform:translate(19vw,0vw);}
    #vd9:hover{z-index:5; width:19vw; height:33.75vw; background-position:-41vw 0vw; transform:translate(41vw,0vw);}
    --></style>