• 11b.02.2024

    Autre variante...

    SURVOL

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 50px auto; text-align: left;">
    <p id="cd0">SURVOL</p>
    <p id="cd1" class="cd">&nbsp;</p>
    <p id="cd2" class="cd">&nbsp;</p>
    <p id="cd3" class="cd">&nbsp;</p>
    <p id="cd4" class="cd">&nbsp;</p>
    </div>
    <style><!--
    #cd0{position:absolute; z-index:1; width:150px; font-size:25px; color:pink; text-shadow:2px 2px black; transform:translate(650px,10px);}
    .cd{position:absolute; filter:grayscale(1);transition:all 1s;}
    #cd1{width:400px; height:150px; background:url('http://ekladata.com/Zk_igWyTIQ04O20-xxRQwNm19mw.jpg'); background-size:800px 600px; background-position: -200px -420px; border-radius:50%; box-shadow:inset 2px 2px 8px black, inset -2px -2px 8px white, 2px 2px 8px black; transform:translate(200px,420px);}
    #cd2{width:500px; height:200px; background:url('http://ekladata.com/e-EHx4sER2AKZjEc8ZqDr76pf6Y.jpg'); background-size:800px 600px; background-position: -150px -300px; border-radius:50%; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px white, 3px 3px 8px black; transform:translate(150px,300px);}
    #cd3{width:600px; height:250px; background:url('http://ekladata.com/Lt4aHhp-sN7fEQ-JYfJqnhrEdsM.jpg'); background-size:800px 600px; background-position: -100px -180px; border-radius:50%; box-shadow:inset 4px 4px 10px black, inset -4px -4px 10px white, 4px 4px 10px black; transform:translate(100px,180px);}
    #cd4{width:700px; height:300px; background:url('http://ekladata.com/DcvQ7BG1ErQF5dpJ98tdoMupsjQ.jpg'); background-size:800px 600px; background-position: -50px -50px; border-radius:50%; box-shadow:inset 5px 5px 12px black, inset -5px -5px 12px white, 5px 5px 12px black; transform:translate(50px,50px);}
    #cd1:hover,#cd2:hover,#cd3:hover,#cd4:hover{z-index:5; width:800px; height:600px; background-position: 0px 0px; filter:grayscale(0); transform:translate(0px,0px);}
    --></style>