• Mont2.25.4.23

    Même principe pour 8 images au ratio 16/9, en 1000x563px;

    SURVOL

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
    <p id="cr0">SURVOL</p>
    <p id="cr1" class="cr">&nbsp;</p>
    <p id="cr2" class="cr">&nbsp;</p>
    <p id="cr3" class="cr">&nbsp;</p>
    <p id="cr4" class="cr">&nbsp;</p>
    <p id="cr5" class="cr">&nbsp;</p>
    <p id="cr6" class="cr">&nbsp;</p>
    <p id="cr7" class="cr">&nbsp;</p>
    <p id="cr8" class="cr">&nbsp;</p>
    </div>
    <style><!--
    #cr0{position:absolute; z-index:1; width:150px; font-size:30px; color:pink; text-shadow:2px 2px black; text-align:center; transform:translate(800px,50px);}
    .cr{position:absolute; background-size:1000px height:563px; box-shadow:inset -4px -4px 8px white, inset 4px 4px 8px black; transition:all 1s;}
    #cr1{z-index:8; width:500px; height:500px; border-radius:50%; background:url('http://ekladata.com/xoD0KeQtODVv7tGi54UIE53Pwg8.jpg'); background-position: 0px -30px; transform:translate(0px,30px);}
    #cr2{z-index:7; width:450px; height:450px; border-radius:50%; background:url('http://ekladata.com/Xfq5RMgN3eE1vD6dfOKckTB2Dbc.jpg'); background-position: -150px -55px; transform:translate(150px,55px);}
    #cr3{z-index:6; width:400px; height:400px; border-radius:50%; background:url('http://ekladata.com/caE9NxCS7L1460UANH9RrrlxDA0.jpg'); background-position: -275px -75px; transform:translate(275px,75px);}
    #cr4{z-index:5; width:350px; height:350px; border-radius:50%; background:url('http://ekladata.com/glxCB3f0oRPsqfTwOp7FdU60gR4.jpg'); background-position: -385px -100px; transform:translate(385px,100px);}
    #cr5{z-index:4; width:300px; height:300px; border-radius:50%; background:url('http://ekladata.com/kImAmuvsYv9SKI4vW9-7uboCT98.jpg'); background-position: -485px -125px; transform:translate(485px,125px);}
    #cr6{z-index:3; width:250px; height:250px; border-radius:50%; background:url('http://ekladata.com/wKwroSLYb-7_mE_ypzr-M_fIO_0.jpg'); background-position: -585px -150px; transform:translate(585px,150px);}
    #cr7{z-index:2; width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/WnA3moOn80xhXlAf0_c2G7wq-C8.jpg'); background-position: -675px -175px; transform:translate(675px,175px);}
    #cr8{z-index:1; width:150px; height:150px; border-radius:50%; background:url('http://ekladata.com/14720IBKYjtLe52hg6-gIXvL7p4.jpg'); background-position: -755px -200px; transform:translate(755px,200px);}
    #cr1:hover,#cr2:hover,#cr3:hover,#cr4:hover,#cr5:hover,#cr6:hover,#cr7:hover,#cr8:hover{z-index:15; width:1000px; height:563px; border-radius:0%; background-position: 0px 0px; transform:translate(0px,0px);}
    --></style>