• 11.02.2024c

     En reprenant le premier code, on peut le modifier pour obtenir des "ovales"

     

    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; border-radius:50%; transition:all 1s;}
    #cd1{width:220px; height:165px; background:url('http://ekladata.com/Zk_igWyTIQ04O20-xxRQwNm19mw.jpg'); background-size:cover; box-shadow:inset 2px 2px 8px black, inset -2px -2px 8px white; transform:translate(580px,435px);}
    #cd2{width:260px; height:195px; background:url('http://ekladata.com/e-EHx4sER2AKZjEc8ZqDr76pf6Y.jpg'); background-size:cover; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px white; transform:translate(440px,330px);}
    #cd3{width:320px; height:240px; background:url('http://ekladata.com/Lt4aHhp-sN7fEQ-JYfJqnhrEdsM.jpg'); background-size:cover; box-shadow:inset 4px 4px 10px black, inset -4px -4px 10px white; transform:translate(250px,190px);}
    #cd4{width:400px; height:300px; background:url('http://ekladata.com/DcvQ7BG1ErQF5dpJ98tdoMupsjQ.jpg'); background-size:cover; box-shadow:inset 5px 5px 12px black, inset -5px -5px 12px white; transform:translate(0px,0px);}
    #cd1:hover,#cd2:hover,#cd3:hover,#cd4:hover{z-index:5; width:800px; height:600px; border-radius:0%; transform:translate(0px,0px);}
    --></style>