• 16.12.D

     4 images en 800x600px mais le code s'adapte à d'autres formats en modifiant les images.

    SURVOL

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 30px auto; text-align: left;">
    <p id="amd0">SURVOL</p>
    <p id="amd1" class="amd">&nbsp;</p>
    <p id="amd2" class="amd">&nbsp;</p>
    <p id="amd3" class="amd">&nbsp;</p>
    <p id="amd4" class="amd">&nbsp;</p>
    </div>

    <p>&nbsp;</p>
    <style><!--
    #amd0{position:absolute; z-index:3; width:30px; height:600px; text-align:center; font-size:30px; color:coral; text-shadow:1px 1px black; transform:translate(390px,0px);}
    .amd{position:absolute; z-index:1; width:350px; height:350px; border-radius:50%; filter:grayscale(1); box-shadow:inset -6px -6px 8px white, inset 6px 6px 8px black; transition:all 1s;}
    #amd1{box-sizing:border-box; background:url('http://ekladata.com/SowfkLZAE-7xnNyYXTwCkygkwCk.jpg'); background-size:800px 600px; background-position:-20px -20px; transform:translate(20px,20px);}
    #amd2{box-sizing:border-box; background:url('http://ekladata.com/ZSGh5dBkHUAzdGeP5ecKZbnDAgA.jpg'); background-size:800px 600px; background-position:-450px -50px; transform:translate(450px,50px);}
    #amd3{box-sizing:border-box; background:url('http://ekladata.com/bTpnoWvjnsyyLyP4RmbRj-ZCXMs.jpg'); background-size:800px 600px; background-position:-420px -220px; transform:translate(420px,220px);}
    #amd4{box-sizing:border-box; background:url('http://ekladata.com/RP3PJaF8knMqLxt9f1tJm4eX5Fo.jpg'); background-size:800px 600px; background-position:-100px -200px; transform:translate(100px,200px);}
    #amd1:hover,#amd2:hover,#amd3:hover,#amd4:hover{z-index:5; width:800px; height:600px; border-radius:0%;background-position:0px 0px; transform:translate(0px,0px);filter:grayscale(0);}
    --></style>