• 16.12.A

     Petitefleur72700 utilise des images en 750px par 750px et en 800px par 600px.

    Voici une première proposition pour 4 images en 750x750px, redimensionnées par le code.

    Changez mes adresses images par les vôtres.

    SURVOL

     

     

     

     


    <div style="width:750px; height:750px; margin:30px auto; text-align:left;">
    <p id="am0">SURVOL</p>
    <p id="am1" class="am">&nbsp;</p>
    <p id="am2" class="am">&nbsp;</p>
    <p id="am3" class="am">&nbsp;</p>
    <p id="am4" class="am">&nbsp;</p>
    </div>

    <p>&nbsp;</p>

    <style><!--
    #am0{position:absolute; z-index:1; width:150px; text-align:center; font-size:30px; color:coral; text-shadow:1px 1px black; transform:translate(300px,350px);}
    .am{position:absolute; z-index:1; width:750px; height:750px; border:4px solid white; transition:all 1s;}
    #am1{box-sizing:border-box; background:url('http://ekladata.com/SowfkLZAE-7xnNyYXTwCkygkwCk.jpg'); background-size:750px 750px; clip-path:polygon(0% 0%, 50% 0%, 50% 0%,0% 50%);}
    #am2{box-sizing:border-box; background:url('http://ekladata.com/ZSGh5dBkHUAzdGeP5ecKZbnDAgA.jpg'); background-size:750px 750px; clip-path:polygon(50% 0%, 100% 0%, 100% 50%,100% 50%);}
    #am3{box-sizing:border-box; background:url('http://ekladata.com/bTpnoWvjnsyyLyP4RmbRj-ZCXMs.jpg'); background-size:750px 750px; clip-path:polygon(100% 50%, 100% 50%, 100% 100%,50% 100%);}
    #am4{box-sizing:border-box; background:url('http://ekladata.com/RP3PJaF8knMqLxt9f1tJm4eX5Fo.jpg'); background-size:750px 750px; clip-path:polygon(0% 50%, 0% 50%, 50% 100%,0% 100%);}
    #am1:hover,#am2:hover,#am3:hover,#am4:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%);}
    --></style>