• Exemple 89

    Un montage simple, en pixels, pour 8 images au ratio 16/9, dimensionnées en 1000x563px. 

    Survol

     

     

     

     

     

     

     

     


    <div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; text-align: left; border: 1px solid black; background: linear-gradient(to top, #cedce7 0%,#596a72 100%); overflow: hidden;">
    <p id="lot0">Survol</p>
    <p id="lot1" class="lot">&nbsp;</p>
    <p id="lot2" class="lot">&nbsp;</p>
    <p id="lot3" class="lot">&nbsp;</p>
    <p id="lot4" class="lot">&nbsp;</p>
    <p id="lot5" class="lot">&nbsp;</p>
    <p id="lot6" class="lot">&nbsp;</p>
    <p id="lot7" class="lot">&nbsp;</p>
    <p id="lot8" class="lot">&nbsp;</p>
    </div>

    <style><!--
    #lot0{position:absolute; z-index:1; width:120px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(50px,150px);}
    .lot{position:absolute; z-index:1; border:4px ridge white; box-shadow:inset -4px -4px 6px black, inset 4px 4px 6xp white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, heihgt 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #lot1{box-sizing:border-box; width:400px; height:110px; background:url('http://ekladata.com/-xRVNwdOwRoaHHjdcdWOczEkG-k@1000x563.jpg'); background-position:-50px 0px; transform:translate(50px,0px);}
    #lot2{box-sizing:border-box; width:300px; height:110px; background:url('http://ekladata.com/Z9qFN62a1hrsxF2EXN2DYdzvBTc@1000x563.jpg'); background-position:-600px 0px; transform:translate(600px,0px);}
    #lot3{box-sizing:border-box; width:500px; height:110px; background:url('http://ekladata.com/xkWTE26t9A2vWw8TvZI5S6nugpg@1000x563.jpg'); background-position:-250px -110px; transform:translate(250px,110px);}
    #lot4{box-sizing:border-box; width:200px; height:110px; background:url('http://ekladata.com/RB6TIsAGKFtSq5pvncBax9_UTio@1000x563.jpg'); background-position:-200px -220px; transform:translate(200px,220px);}
    #lot5{box-sizing:border-box; width:300px; height:110px; background:url('http://ekladata.com/t5CXMNs66EuFkJsdvDc8VhQHFHU@1000x563.jpg'); background-position:-600px -220px; transform:translate(600px,220px);}
    #lot6{box-sizing:border-box; width:500px; height:110px; background:url('http://ekladata.com/Aq7hjQq0Z6U7x6X1BJSB2pTlRz8@1000x563.jpg'); background-position:-50px -330px; transform:translate(50px,330px);}
    #lot7{box-sizing:border-box; width:200px; height:110px; background:url('http://ekladata.com/3BKYYm1q99YElvetNJ1V7BFHitc@1000x563.jpg'); background-position:-750px -330px; transform:translate(750px,330px);}
    #lot8{box-sizing:border-box; width:600px; height:110px; background:url('http://ekladata.com/P3C_ouuDPjn2ZYHWRK3-Sl0YF3c@1000x563.jpg'); background-position:-200px -440px; transform:translate(200px,440px);}
    #lot1:hover,#lot2:hover,#lot3:hover,#lot4:hover,#lot5:hover,#lot6:hover,#lot7:hover,#lot8:hover{z-index:5; width:1000px; height:563px; filter:grayscale(0); background-position:0px 0px; transform: translate(0px,0px);}
    --></style>