• Art.31.10.22

    Pour 6 images au ratio 16/9 (1600px par 900px) à survoler.

     

     

     

     

     

     


    <div style="width: 1600px; height: 900px; margin: 35px auto; text-align: left;">
    <p id="sol1" class="sola">&nbsp;</p>
    <p id="sol2" class="sola">&nbsp;</p>
    <p id="sol3" class="sola">&nbsp;</p>
    <p id="sol4" class="solc">&nbsp;</p>
    <p id="sol5" class="solc">&nbsp;</p>
    <p id="sol6" class="solc">&nbsp;</p>
    </div>

    <style><!--
    .sola{position:absolute; z-index:1; width:500px; height:400px; border:4px ridge white;  filter:grayscale(1) contrast(1.2); transition: transform 1s 0s,width 1s 0s, height 1s 1s,background 1s 0s, filter 1s 2s;}
    .solc{position:absolute; z-index:1; width:500px; height:400px; border:4px ridge white;   filter:grayscale(1) contrast(1.2); transition:transform 1s 0s, width 1s 0s, height 1s 1s, background 1s 1s, margin 1s 1s, filter 1s 2s;}
    #sol1{background:url('http://ekladata.com/lQCZFJ8jtJ90Nxj9wgAHt-scxpU.jpg');background-size:1600px 900px; background-position:0px 0px;}
    #sol2{background:url('http://ekladata.com/xo2qsHGWdqa8HeEBvvumINTSToc.jpg'); background-size:1600px 900px; transform:translate(550px, 0px); background-position:-550px 0px;}
    #sol3{background:url('http://ekladata.com/R4MPZHKWyrBvtgAjnSZaTc-feLA.jpg'); background-size:1600px 900px; transform:translate(1100px, 0px); background-position:-1100px 0px;}
    #sol4{background:url('http://ekladata.com/EhKqNQRFQDrLQZoywf4sIZ3yfA4.jpg'); background-size:1600px 900px; transform:translate(0px,0px); background-position:0% 100%; margin:500px 0px 0px 0px;}
    #sol5{background:url('http://ekladata.com/tBwJ2krNbYdWcD-9bXOkjp1S2rU.jpg'); background-size:1600px 900px; transform:translate(550px,0px); background-position:50% 100%; margin:500px 0px 0px 0px;}
    #sol6{background:url('http://ekladata.com/OliN8VzwFpSC2Z2pmJM_XSaORf0.jpg'); background-size:1600px 900px; transform:translate(1100px, 0px); background-position:100% 100%; margin:500px 0px 0px 0px;}
    #sol1:hover,#sol2:hover,#sol3:hover{z-index:5; width:1600px; height:900px; transform:translate(0px,0px); background-position:0px 0px; filter:grayscale(0); }
    #sol4:hover,#sol5:hover,#sol6:hover{z-index:5; width:1600px; height:900px; transform:translate(0px,0px); margin:0px 0px 0px 0px; filter:grayscale(0) contrast(1.2);}
    --></style>