• 06a.10.2024

    Ne m'en veuillez pas trop de toujours proposer le même genre de montages mais je vérifie, à chaque fois, que le code est digéré par les éditeurs Ekla et Blogger.

    SURVOL

     

     

     

     

     

     


    <div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;">
    <p id="cad0">SURVOL</p>
    <p id="cad1" class="cad">&nbsp;</p>
    <p id="cad2" class="cad">&nbsp;</p>
    <p id="cad3" class="cad">&nbsp;</p>
    <p id="cad4" class="cad">&nbsp;</p>
    <p id="cad5" class="cad">&nbsp;</p>
    <p id="cad6" class="cad">&nbsp;</p>
    </div>
    <style><!--
    #cad0{ position:absolute; z-index:1; width:200px;text-align:center; font-size:30px; color:green; text-shadow:2px 2px black; transform:translate(500px,315px);}
    .cad{position:absolute; z-index:1; margin-top:0px; width:400px; height:675px; border:4px solid white; transition:all 1s;}
    #cad1{box-sizing:border-box; transform-origin:top center; background:url('http://ekladata.com/KwtZmTalkh71MslTW03Cxx_7NnY.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatex(-20deg);}
    #cad2{box-sizing:border-box; transform-origin:top center; background:url('http://ekladata.com/9LmWz6Ty84uCTbWJhbgXR0l3izA.jpg'); background-size:1200px 675px; background-position:-400px 0px; transform:translate(400px,0px) perspective(200px) rotatex(-20deg);}
    #cad3{box-sizing:border-box; transform-origin:top center; background:url('http://ekladata.com/kTH1vSHN9lHhsTUbcfljq5rtZLI.jpg'); background-size:1200px 675px; background-position:-800px 0px; transform:translate(800px,0px) perspective(200px) rotatex(-20deg);}
    #cad4{box-sizing:border-box; transform-origin:bottom center; background:url('http://ekladata.com/0w9bYT5zsqYXlgXcerLkjz1rocY.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px) perspective(200px) rotatex(20deg);}
    #cad5{box-sizing:border-box; transform-origin:bottom center; background:url('http://ekladata.com/2ID1EvwHrzJLz38E4iadcnLMOTs.jpg'); background-size:1200px 675px; background-position:-400px 0px; transform:translate(400px,0px) perspective(200px) rotatex(20deg);}
    #cad6{box-sizing:border-box; transform-origin:bottom center; background:url('http://ekladata.com/RE4FqTe5TAYOlSpZRYMpYc1T_eU.jpg'); background-size:1200px 675px; background-position:-800px 0px; transform:translate(800px,0px) perspective(200px) rotatex(20deg);}
    #cad1:hover,#cad2:hover,#cad3:hover,#cad4:hover,#cad5:hover,#cad6:hover{z-index:5; width:1200px; height:675px; background-position:0px 0px; transform:translate(0px,0px) perspective(2000px) rotate(0deg);}
    --></style>