• 29.12.23A

    4 images en 800x600px, avec bordure intégrée qui n'affichent que la partie d'image selon leur position puis, au survol, qui s'affichent en totalité.

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 30px auto; text-align: left;">
    <p id="ln1" class="ln">&nbsp;</p>
    <p id="ln2" class="ln">&nbsp;</p>
    <p id="ln3" class="ln">&nbsp;</p>
    <p id="ln4" class="ln">&nbsp;</p>
    </div>

    <style><!--
    .ln{position:absolute; z-index:1;  width:400px; height:300px; border:4px solid white; background-size:800px 600px; transition:all 1s;}
    #ln1{box-sizing:border-box; background:url('http://ekladata.com/rnMgHMzedCgxBeEjHy00-5v6OnA.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
    #ln2{box-sizing:border-box; background:url('http://ekladata.com/yDxjBZjbTkaIBJA4O_tMGCn4KyY.jpg'); background-position:-400px 0px; transform:translate(400px,0px);}
    #ln3{box-sizing:border-box; background:url('http://ekladata.com/MjswJKXTv7QmHvv0kqGjugBFoEs.jpg'); background-position:-400px -300px; transform:translate(400px,300px);}
    #ln4{box-sizing:border-box; background:url('http://ekladata.com/mCqZRYfKQhBeEJbKghiSpM6GaJM.jpg'); background-position:0px -300px; transform:translate(0px,300px);}
    #ln1:hover,#ln2:hover,#ln3:hover,#ln4:hover{z-index:5; width:800px; height:600px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>