• Exemple 175

    Même principe sur 2 variantes d'un même montage, vignette en vertical avec la partie de l'image selon sa position.

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 5px auto;">
    <p id="vcb0">Survol</p>
    <p id="vcb1" class="vcb">&nbsp;</p>
    <p id="vcb2" class="vcb">&nbsp;</p>
    <p id="vcb3" class="vcb">&nbsp;</p>
    <p id="vcb4" class="vcb">&nbsp;</p>
    <p id="vcb5" class="vcb">&nbsp;</p>
    <p id="vcb6" class="vcb">&nbsp;</p>
    <p id="vcb7" class="vcb">&nbsp;</p>
    <p id="vcb8" class="vcb">&nbsp;</p>
    </div>

    <style><!--
    #vcb0{position:absolute; z-index:1; width:10px; text-align:center; font-size:40px; color:coral; text-shadow:1px 1px black; white-space:normal; transform:translate(0px,0px);}
    .vcb{position:absolute; z-index:1; width:100px; height:562px; border:6px ridge white; transition:all 1s linear;}
    #vcb1{box-sizing:border-box; background:url('http://ekladata.com/36nx0VzHLIR07VFTjOVpY-FLf00.jpg'); background-size:1000px 562px; background-position:-60px 0px; transform:translate(60px,0px);}
    #vcb2{box-sizing:border-box; background:url('http://ekladata.com/TOQ2qxym7S_non513UxAgpnAxpY.jpg'); background-size:1000px 562px; background-position:-180px 0px; transform:translate(180px,0px);}
    #vcb3{box-sizing:border-box; background:url('http://ekladata.com/PQCXItk3LZ-T9QK0iRRfkPT118Y.jpg'); background-size:1000px 562px; background-position:-300px 0px; transform:translate(300px,0px);}
    #vcb4{box-sizing:border-box; background:url('http://ekladata.com/qa1Afo-luBfSl3niK9sBry5NrYA.jpg'); background-size:1000px 562px; background-position:-420px 0px; transform:translate(420px,0px);}
    #vcb5{box-sizing:border-box; background:url('http://ekladata.com/XhC-_1EjSyWEMGIBFhSpIYy1xUI.jpg'); background-size:1000px 562px; background-position:-540px 0px; transform:translate(540px,0px);}
    #vcb6{box-sizing:border-box; background:url('http://ekladata.com/q4e6KbIoo1L_mA44sbHF4Pqf504.jpg'); background-size:1000px 562px; background-position:-660px 0px; transform:translate(660px,0px);}
    #vcb7{box-sizing:border-box; background:url('http://ekladata.com/0dQsvYLYoVItRwk3sIx9lRDiEIw.jpg'); background-size:1000px 562px; background-position:-780px 0px; transform:translate(780px,0px);}
    #vcb8{box-sizing:border-box; background:url('http://ekladata.com/49P6SEW-TZOUD69h0UWpPU1MHNg.jpg'); background-size:1000px 562px; background-position:-900px 0px; transform:translate(900px,0px);}
    #vcb1:hover,#vcb2:hover,#vcb3:hover,#vcb4:hover,#vcb5:hover,#vcb6:hover,#vcb7:hover,#vcb8:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>