• Montage 321

    7 images au ratio 16/9

    Survol

     

     

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; background: url('http://ekladata.com/YjONlWcCh_oNyKGJmOH98suOsn4.jpg'); background-size: cover; border: 1px solid black;">
    <p id="conf0">Survol</p>
    <p id="conf1" class="conf">&nbsp;</p>
    <p id="conf2" class="conf">&nbsp;</p>
    <p id="conf3" class="conf">&nbsp;</p>
    <p id="conf4" class="conf">&nbsp;</p>
    <p id="conf5" class="conf">&nbsp;</p>
    <p id="conf6" class="conf">&nbsp;</p>
    </div>
    <style><!--
    #conf0{position:absolute; z-index:1; width:160px; font-size:25px; color:coral; text-shadow:1px 1px black; transform:translate(200px,20px);}
    .conf{position:absolute; z-index:1; width:100px; height:100px; border-radius:50%; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
    #conf1{background:url('http://ekladata.com/MsJsA6zGIkcAtsvArxtaLB9MNYs.jpg'); background-size:900px 506px; background-position:-100px -80px; transform:translate(100px,80px);}
    #conf2{background:url('http://ekladata.com/vctFbU_dYxwfx8hldR6Wgyu_yEU.jpg'); background-size:900px 506px; background-position:-250px -80px; transform:translate(250px,80px);}
    #conf3{background:url('http://ekladata.com/MP9bD2EfKkixToGwj16DVH7g0P0.jpg'); background-size:900px 506px; background-position:-100px -220px; transform:translate(100px,220px);}
    #conf4{background:url('http://ekladata.com/kvqpdS8uuaPN-7VCtxzOxq94LzM.jpg'); background-size:900px 506px; background-position:-250px -220px; transform:translate(250px,220px);}
    #conf5{background:url('http://ekladata.com/mAgvFo4EPOrPnowvpPBDdCjvhOA.jpg'); background-size:900px 506px; background-position:-100px -360px; transform:translate(100px,360px);}
    #conf6{background:url('http://ekladata.com/8aXuphuqU5gsegwwZhMpWpHb-ic.jpg'); background-size:900px 506px; background-position:-250px -360px; transform:translate(250px,360px);}
    #conf1:hover,#conf2:hover,#conf3:hover,#conf4:hover,#conf5:hover,#conf6:hover{z-index:5; width:900px; height:506px; border:none; border-radius:0%; filter:grayscale(0); background-position:0px 0px; transform:translate(0px,0px);}
    --></style>