• Exemple 87

    6 images au ratio 16/9.

    Survol

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto; text-align: left; border: 0.1vh solid black; background: url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg');">
    <p id="sv">Survol</p>
    <p id="ord1" class="ord">&nbsp;</p>
    <p id="ord2" class="ord">&nbsp;</p>
    <p id="ord3" class="ord">&nbsp;</p>
    <p id="ord4" class="ord">&nbsp;</p>
    <p id="ord5" class="ord">&nbsp;</p>
    <p id="ord6" class="ord">&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);}
    .ord{position:absolute; z-index:1; width:250px; height:140px; box-shadow:inset -4px -4px 8px white, inset 4px 4px 8px black; transition:all 1s linear;}
    #ord1{background:url('http://ekladata.com/mpvJ5JJEDQZzpZ6CDSvV8Y-ekKg.jpg'); background-position:-60px -90px; transform:translate(60px,90px);}
    #ord2{background:url('http://ekladata.com/UKvbE_NvwyIObVxEyhm5IFNS6Tc.jpg'); background-position:-370px -90px; transform:translate(370px,90px);}
    #ord3{background:url('http://ekladata.com/QBmzUmAm2ZpncL_QdvzFEhpbwpY.jpg'); background-position:-680px -90px; transform:translate(680px,90px);}
    #ord4{background:url('http://ekladata.com/_FqgETyqhU1fPbvmsI_9k6v39Sk.jpg'); background-position:-60px -320px; transform:translate(60px,320px);}
    #ord5{background:url('http://ekladata.com/l4mzcHHF9d0gASVufQy395WhXQU.jpg'); background-position:-370px -320px; transform:translate(370px,320px);}
    #ord6{background:url('http://ekladata.com/LmiRzOjUl8jmc6iBCPhaiCUrHJc.jpg'); background-position:-680px -320px; transform:translate(680px,320px);}
    #ord1:hover,#ord2:hover,#ord3:hover,#ord4:hover,#ord5:hover,#ord6:hover{z-index:5; width:1000px; height:563px; background-size:1000px 563px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>