• Exemple 86

     7 images au ratio 16/9, redimensionnées par le code en 1000x563px.

    Survol

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 5px auto; text-align: left; border: 0.1vh solid black; background:url('http://ekladata.com/AsxVvJmGuNPIchtEj9cXM-Fz6fo.jpg'); background-size:1000px 563px;">
    <p id="sv">Survol</p>
    <p id="skw1" class="skw">&nbsp;</p>
    <p id="skw2" class="skw">&nbsp;</p>
    <p id="skw3" class="skw">&nbsp;</p>
    <p id="skw4" class="skw">&nbsp;</p>
    <p id="skw5" class="skw">&nbsp;</p>
    <p id="skw6" class="skw">&nbsp;</p>
    </div>
    <style><!--
    #sv{position:absolute; z-index:1; width:100px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(50px,0px);}
    .skw{position:absolute; z-index:1; width:50px; height:175px; box-shadow:inset -4px -4px 8px black, inset 4px 4px 8px white; transition:all 1s linear;}
    #skw1{background:url('http://ekladata.com/mpvJ5JJEDQZzpZ6CDSvV8Y-ekKg.jpg'); transform:translate(0px,15px) skewy(30deg);}
    #skw2{background:url('http://ekladata.com/UKvbE_NvwyIObVxEyhm5IFNS6Tc.jpg'); transform:translate(0px,190px) skewy(30deg);}
    #skw3{background:url('http://ekladata.com/QBmzUmAm2ZpncL_QdvzFEhpbwpY.jpg'); transform:translate(0px,365px) skewy(30deg);}
    #skw4{background:url('http://ekladata.com/_FqgETyqhU1fPbvmsI_9k6v39Sk.jpg'); transform:translate(950px,15px) skewy(-30deg);}
    #skw5{background:url('http://ekladata.com/l4mzcHHF9d0gASVufQy395WhXQU.jpg'); transform:translate(950px,190px) skewy(-30deg);}
    #skw6{background:url('http://ekladata.com/LmiRzOjUl8jmc6iBCPhaiCUrHJc.jpg'); transform:translate(950px,365px) skewy(-30deg);}
    #skw1:hover,#skw2:hover,#skw3:hover,#skw4:hover,#skw5:hover,#skw6:hover{z-index:5; width:1000px; height:563px; background-size:1000px 563px; transform:translate(0px,0px) skewy(0deg);}
    --></style>