• Art.03D.5.21

    7 images au ratio 16/9.

    Survol

     

     

     

     

     

     

    ***************************
    <div style="width: 1000px; height: 562px; border: 1px solid black; margin: 20px auto; background: url('http://ekladata.com/q7eU2RqEA8A_0LkCRcpRkPyPJ28.jpg'); background-size: cover; text-align: left;">
    <p id="apm0">Survol</p>
    <p id="apm1" class="apm">&nbsp;</p>
    <p id="apm2" class="apm">&nbsp;</p>
    <p id="apm3" class="apm">&nbsp;</p>
    <p id="apm4" class="apm">&nbsp;</p>
    <p id="apm5" class="apm">&nbsp;</p>
    <p id="apm6" class="apm">&nbsp;</p>
    </div>
    <style><!--
    #apm0{position:absolute; z-index:1; width:150px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(250px,50px);}
    .apm{position:absolute; z-index:1; width:40px; border:4px ridge white; transition:all 1s;}
    #apm1{box-sizing:border-box; height:562px; background:url('http://ekladata.com/1MjBHib0xEhOQIwhQgoINIBn-6k.jpg'); background-size:1000px 562px; background-position:-0px 0px; transform:translate(0px,0px);}
    #apm2{box-sizing:border-box; height:502px; background:url('http://ekladata.com/JtqPALklpaXffyxlbUf9tcmHGok.jpg'); background-size:1000px 562px; background-position:-60px -30px; transform:translate(60px,30px);}
    #apm3{box-sizing:border-box; height:442px; background:url('http://ekladata.com/HftvDdRt6WSLy4X4o8_MJi0GnjM.jpg'); background-size:1000px 562px; background-position:-120px -60px; transform:translate(120px,60px);}
    #apm4{box-sizing:border-box; height:442px; background:url('http://ekladata.com/Fk2VBne7H0Dv6PD5ShzzoiuHrf0.jpg'); background-size:1000px 562px; background-position:-840px -60px; transform:translate(840px,60px);}
    #apm5{box-sizing:border-box; height:502px; background:url('http://ekladata.com/AZ2oOpuqkTA94J52U4JZbDifGww.jpg'); background-size:1000px 562px; background-position:-900px -30px; transform:translate(900px,30px);}
    #apm6{box-sizing:border-box; height:562px; background:url('http://ekladata.com/gONW3IkcuphWVt7YppgVG4_XWeM.jpg'); background-size:1000px 562px; background-position:-960px 0px; transform:translate(960px,0px);}
    #apm1:hover,#apm2:hover,#apm3:hover,#apm4:hover,#apm5:hover,#apm6:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>