• Fred 2

     Ne regardez pas les images: elles ne sont pas adaptées au montage mais ce n'est qu'un exemple pour 6 images en 877x555px.

    SURVOL

     

     

     

     

     

     


    <div style="width: 877px; height: 555px; margin: 30px auto; text-align: left;">
    <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; font-size:30px; width:150px; transform:translate(200px,0px);}
    .fd{position:absolute; z-index:1; border-radius:50%; box-shadow:inset -4px -4px 8px black, inset 4px 4px 8px white; background-size:877px 555px; filter:grayscale(1); transition:all 1s 0s, filter 0.5s 1s;}
    #fd1{width:150px; height:150px;background:url('http://ekladata.com/gj0NVQSmVAVzouRqmB5vi-wrv2o@877x555.jpg'); background-position:-50px -100px; transform:translate(50px,100px);}
    #fd2{width:150px; height:150px;background:url('http://ekladata.com/EeLzhN5CeJr1o3oa41w9cNNIKUI@877x555.jpg'); background-position:-600px -80px; transform:translate(600px,80px);}
    #fd3{width:120px; height:120px;background:url('http://ekladata.com/6XHldcA_2CjWUKBQRQdiMXpryOA@877x555.jpg'); background-position:-350px -50px; transform:translate(350px,50px);}
    #fd4{width:150px; height:150px;background:url('http://ekladata.com/IqzPGXkvTDkS14N937M_qSaqJ4U@877x555.jpg'); background-position:-200px -250px; transform:translate(200px,250px);}
    #fd5{width:200px; height:200px;background:url('http://ekladata.com/F_thVuzXmpNoIk4pIrg1RKmrHao@877x555.jpg'); background-position:-450px -250px; transform:translate(450px,250px);}
    #fd6{width:100px; height:100px;background:url('http://ekladata.com/sMQmaWAK5e0fYWVJnhXcWHHg4T8@877x555.jpg'); background-position:-700px -350px; transform:translate(700px,350px);}
    #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>