• Exemple 16

    Si vous avez des images "verticales", en 16/9 (ex:1080x1920px), vous pouvez les réduire en 385x684px par le code et les présenter ainsi:

    Survol

     

     

     

     

     

     

    <div style="width: 19vw; height: 33.75vw;  margin: 1vh auto; text-align: left;">
    <p id="ind">Survol</p>
    <p id="ind1" class="ind">&nbsp;</p>
    <p id="ind2" class="ind">&nbsp;</p>
    <p id="ind3" class="ind">&nbsp;</p>
    <p id="ind4" class="ind">&nbsp;</p>
    <p id="ind5" class="ind">&nbsp;</p>
    <p id="ind6" class="ind">&nbsp;</p>
    </div>
    <style><!--
    #ind{position:absolute; z-index:2; width:10vw; height:1.5vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(4.5vw,0vw);}
    .ind{position:absolute; z-index:1; width:19vw; height:5vw; transition:all 1s linear;}
    #ind1{background:url('http://ekladata.com/qSLY9gtKrBPeJOnPGw71jIH42qI@385x684.jpg'); background-size:cover; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    #ind2{background:url('http://ekladata.com/UlMQLUciY9hNWKX0k4BvFHdJ85U@385x684.jpg'); background-size:cover; background-position:0vw -5.5vw; transform:translate(0vw,5.5vw);}
    #ind3{background:url('http://ekladata.com/gwSPR3iJnv9bezADXFOPLj9KUWc@385x684.jpg'); background-size:cover; background-position:0vw -11vw; transform:translate(0vw,11vw);}
    #ind4{background:url('http://ekladata.com/dGV6mbl9Qn55h8CmU0kqg4dKq5o@385x684.jpg'); background-size:cover; background-position:0vw -16.5vw; transform:translate(0vw,16.5vw);}
    #ind5{background:url('http://ekladata.com/GKNMOrOoHsCIc4g3RdsTcJQFFL4@385x684.jpg'); background-size:cover; background-position:0vw -22vw; transform:translate(0vw,22vw);}
    #ind6{background:url('http://ekladata.com/zvhK6cUx_kWll4cJTLkbE-7lLjo@385x684.jpg'); background-size:cover; background-position:0vw -27.5vw; transform:translate(0vw,27.5vw);}
    #ind1:hover,#ind2:hover,#ind3:hover,#ind4:hover,#ind5:hover,#ind6:hover{z-index:5; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
    --></style>