• Montage.10.6.23

    5 images au ratio 16/9, en 1200px par 675px. Survol des 4 bordures blanches.

     

     

     

     


    <div style="width: 1200px; height: 675px; margin: 30px auto; text-align: left; border: 8px solid white; background: url('http://ekladata.com/IG9BucQnIsvuRxlE0zUlQKzu3rU.jpg'); background-size: cover;">
    <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>
    </div>

    <style><!--
    .mar{position:absolute; z-index:1; border:4px solid white; transition:all 1s;}
    #mar1{width:1200px; height:0px; background:url('http://ekladata.com/0mzP4ecf3eToHJL39xSR-FnHUwQ.jpg'); background-position:0px 0px; transform:translate(-4px,-4px);}
    #mar2{width:0px; height:675px; background:url('http://ekladata.com/AdJrbeHOMp2yn8D0et3e7nX9ntk.jpg'); background-position:-1200px 0px; transform:translate(1196px,-4px);}
    #mar3{width:1200px; height:0px; background:url('http://ekladata.com/TYpwu5-V3FLZeoeXBpXyulotSA8.jpg'); background-position:0px -675px; transform:translate(-4px,671px);}
    #mar4{width:0px; height:675px; background:url('http://ekladata.com/C_JtP-BwTYILIAlW8R99RxJ0BR8.jpg'); background-position:0px 0px; transform:translate(-4px,-4px);}
    #mar1:hover,#mar2:hover,#mar3:hover,#mar4:hover{z-index:5; width:1200px; height:675px; background-position:0px 0px; transform:translate(-4px,-4px);}
    --></style>