• Mont.11.6.23

     Montage en 877px par 555px pour Frédéric, si j'ai bien compris sa demande.

    SURVOL

     

     

     

     

     

     


    <div style="width: 877px; height: 555px; margin: 30px auto; text-align: left; border: 1px solid black;">
    <p id="fd0">SURVOL</p>
    <p id="fd1" class="fd">&nbsp;</p>
    <p id="fd2" class="fd">&nbsp;</p>
    <p id="fd3" class="fd">&nbsp;</p>
    <p id="fd4" class="fd">&nbsp;</p>
    <p id="fd5" class="fd">&nbsp;</p>
    <p id="fd6" class="fd">&nbsp;</p>
    </div>
    <style><!--
    #fd0{position:absolute; z-index:1: width:120px; font-size:22px;}
    .fd{position:absolute; z-index:1: background-size:877px 555px; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white; filter:grayscale(1); transition:all 1s 0s, filter 0.5s 1s;}
    #fd1{width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/B_axNkcEwabY3_FCuVwJ48w0MKQ.jpg'); background-position:-100px -50px; transform:translate(100px,50px);}
    #fd2{width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/LklRkJNK0PC9gK1nrBiatG56qsE.jpg'); background-position:-330px -100px; transform:translate(330px,100px);}
    #fd3{width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/w_AyvqpJZ_5HI1dgJJD6wRWkGYo.jpg'); background-position:-550px -50px; transform:translate(550px,50px);}
    #fd4{width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/5sq7R83eY5ZpMofTPud1RjeEzUQ.jpg'); background-position:-50px -350px; transform:translate(50px,350px);}
    #fd5{width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/pgu20NsRxn_DoIroP4mg4OYs9bk.jpg'); background-position:-350px -340px; transform:translate(350px,340px);}
    #fd6{width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/6IBx-EY6Rz8-yqVynLWgwsLvVew.jpg'); background-position:-600px -300px; transform:translate(600px,300px);}
    #fd1:hover,#fd2:hover,#fd3:hover,#fd4:hover,#fd5:hover,#fd6:hover{z-index:5; width:877px; height:555px; border-radius:0%; filter:grayscale(0); background-position:0px 0px; transform:translate(0px,0px);}
    --></style>