• 11a.02.2024

     Une 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; transition:all 1s;}
    #cd1{width:150px; height:300px; background:url('http://ekladata.com/Zk_igWyTIQ04O20-xxRQwNm19mw.jpg'); background-size:800px 600px; background-position: -580px -150px; border-radius:50%; box-shadow:inset 2px 2px 8px black, inset -2px -2px 8px white; transform:translate(580px,150px);}
    #cd2{width:200px; height:400px; background:url('http://ekladata.com/e-EHx4sER2AKZjEc8ZqDr76pf6Y.jpg'); background-size:800px 600px; background-position: -450px -100px; border-radius:50%; box-shadow:inset 3px 3px 8px black, inset -3px -3px 8px white; transform:translate(450px,100px);}
    #cd3{width:250px; height:500px; background:url('http://ekladata.com/Lt4aHhp-sN7fEQ-JYfJqnhrEdsM.jpg'); background-size:800px 600px; background-position: -240px -50px; border-radius:50%; box-shadow:inset 4px 4px 10px black, inset -4px -4px 10px white; transform:translate(240px,50px);}
    #cd4{width:300px; height:600px; background:url('http://ekladata.com/DcvQ7BG1ErQF5dpJ98tdoMupsjQ.jpg'); background-size:800px 600px; background-position: 0px 0px; border-radius:50%; 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%; background-position: 0px 0px; transform:translate(0px,0px);}
    --></style>