• Art.12.5.21

    Variante pour 1+8 images au ratio 16/9.

    SURVOL

     

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 4px ridge white; background: url('http://ekladata.com/qvyu6PPitzlWKxAoRVUKeLCc9s8.jpg'); background-size: cover;">
    <p id="dsa0">SURVOL</p>
    <p id="dsa1" class="dsa">&nbsp;</p>
    <p id="dsa2" class="dsa">&nbsp;</p>
    <p id="dsa3" class="dsa">&nbsp;</p>
    <p id="dsa4" class="dsa">&nbsp;</p>
    <p id="dsa5" class="dsa">&nbsp;</p>
    <p id="dsa6" class="dsa">&nbsp;</p>
    <p id="dsa7" class="dsa">&nbsp;</p>
    <p id="dsa8" class="dsa">&nbsp;</p>
    </div>
    <style><!--
    #dsa0{position:absolute; z-index:1; width:120px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(400px,20px);}
    .dsa{position:absolute; z-index:1; width:100px; height:100px; border:4px ridge white; box-shadow:4px 4px 6px black; transition:all 1s, opacity 0s;}
    #dsa1{background:url('http://ekladata.com/F8FeqcWtTcHjtxn01dVmx-0AWDw.jpg'); background-size:1000px 562px; background-position:-100px -50px; transform:translate(100px,50px) skewx(20deg); }
    #dsa2{background:url('http://ekladata.com/dD5n0Bg5hO2S5juBHKKvqR54_Xo.jpg'); background-size:1000px 562px; background-position:-100px -160px; transform:translate(100px,160px) skewx(-20deg);}
    #dsa3{background:url('http://ekladata.com/xgqPzvp_OMovJweH2whuve3YQZY.jpg'); background-size:1000px 562px; background-position:-100px -270px; transform:translate(100px,270px) skewx(20deg);}
    #dsa4{background:url('http://ekladata.com/mfeZBJ5OiTa29dliOD3OU5jGVYs.jpg'); background-size:1000px 562px; background-position:-100px -380px; transform:translate(100px,380px) skewx(-20deg); }
    #dsa5{background:url('http://ekladata.com/EeqSAdjbOAUel3ehmM3nrilnf1c.jpg'); background-size:1000px 562px; background-position:-800px -50px; transform:translate(800px,50px) skewx(-20deg);}
    #dsa6{background:url('http://ekladata.com/-kRdMapn6fnsYv4fclZBMepqNBM.jpg'); background-size:1000px 562px; background-position:-800px -160px; transform:translate(800px,160px) skewx(20deg);}
    #dsa7{background:url('http://ekladata.com/E_jjj-rzG9-5U3NLNC9uFtxIjyA.jpg'); background-size:1000px 562px; background-position:-800px -270px; transform:translate(800px,270px) skewx(-20deg);}
    #dsa8{background:url('http://ekladata.com/pxtWqOudJM2ytUUTbyDDmzqRHh8.jpg'); background-size:1000px 562px; background-position:-800px -380px; transform:translate(800px,380px) skewx(20deg);}
    #dsa1:hover, #dsa2:hover, #dsa3:hover, #dsa4:hover, #dsa5:hover, #dsa6:hover, #dsa7:hover, #dsa8:hover{z-index:5; width:1000px; height:562px; border:none; box-shadow:none; background-position:0px 0px;transform:translate(0px,0px) skewy(0deg);}
    --></style>