• Art..24c.8.21

    Même montage avec affichage de la partie de l'image selon sa position.

    Survol

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
    <p id="mar0">Survol</p>
    <p id="mar1" class="mar">&nbsp;</p>
    <p id="mar2" class="mar">&nbsp;</p>
    <p id="mar3" class="mar">&nbsp;</p>
    <p id="mar4" class="mar">&nbsp;</p>
    <p id="mar5" class="mar">&nbsp;</p>
    </div>

    <style><!--
    #mar0{position:absolute; z-index:1; width:120px; font-size:25px; transform:translate(450px,20px);}
    .mar{position:absolute; z-index:1; width:400px; height:225px; border:4px ridge white; background-size:1000px 562px; transition:all 1s;}
    #mar1{box-sizing:border-box; background:url('http://ekladata.com/MWDFurhY_sCDp7v-msiWdcOraRQ@1000x562.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
    #mar2{box-sizing:border-box; background:url('http://ekladata.com/t6QUASBEOVOdtrPiNk8TQDgsFWU@1000x562.jpg'); background-position:-600px 0px; transform:translate(600px,0px);}
    #mar3{box-sizing:border-box; background:url('http://ekladata.com/BP4hsfBc9_cqHHZ9n0Hj-M-8bao@1000x562.jpg'); background-position:-600px -337px; transform:translate(600px,337px);}
    #mar4{box-sizing:border-box; background:url('http://ekladata.com/IbdjhzSeitYwt4vv037JW6oYCOo@1000x562.jpg'); background-position:0px -337px; transform:translate(0px,337px);}
    #mar5{box-sizing:border-box; background:url('http://ekladata.com/HHYsvXoxrBSL3WFiNJvRyGkDoIE@1000x562.jpg'); background-position:-300px -169px; transform:translate(300px,169px);}
    #mar1:hover,#mar2:hover,#mar3:hover,#mar4:hover,#mar5:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>