• Dimanche

    7 images au ratio 16/9, en 1000x563px mais modifiable à d'autres ratios ou/et d'autres dimensions.

    SURVOL

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
    <p id="dim0">SURVOL</p>
    <p id="dim1" class="dim">&nbsp;</p>
    <p id="dim2" class="dim">&nbsp;</p>
    <p id="dim3" class="dim">&nbsp;</p>
    <p id="dim4" class="dim">&nbsp;</p>
    <p id="dim5" class="dim">&nbsp;</p>
    <p id="dim6" class="dim">&nbsp;</p>
    <p id="dim7" class="dim">&nbsp;</p>
    </div>

    <style><!--
    #dim0{position:absolute; z-index:1; width:120px; font-size:25px; transform:translate(600px,10px);}
    .dim{position:absolute; z-index:1; box-shadow:inset -4px -4px 8px black, inset 4px 4px 8px white; background-size:1000px 563px; filter:sepia(1);transition:all 1s, filter 0.5s 1s;}
    #dim1{box-sizing:border-box; width:200px; height:300px; border-radius:50%; background:url('http://ekladata.com/H4hpoTh497vnys2oCmATueTyjbE.jpg'); background-position:-100px -50px; transform:translate(100px,50px);}
    #dim2{box-sizing:border-box; width:300px; height:300px; border-radius:50%; background:url('http://ekladata.com/kEqdu9ud4_8tYlXZAGxGlzZ-ujY.jpg'); background-position:-200px -200px; transform:translate(200px,200px);}
    #dim3{box-sizing:border-box; width:400px; height:300px; border-radius:50%; background:url('http://ekladata.com/kYHtm0ildNQrJalXHvMvRTqKvyg.jpg'); background-position:-400px -80px; transform:translate(400px,80px) rotate(-20deg);}
    #dim4{box-sizing:border-box; width:270px; height:270px; border-radius:50%; background:url('http://ekladata.com/nYhCqWP9ixkfRXS_jvPQ2Mc9ydE.jpg'); background-position:-600px -250px; transform:translate(600px,250px);}
    #dim5{box-sizing:border-box; width:150px; height:250px; border-radius:50%; background:url('http://ekladata.com/lbI3C2ByE-L3Zgcun5vKIUQP3lg.jpg'); background-position:-100px -300px; transform:translate(100px,300px) rotate(20deg);}
    #dim6{box-sizing:border-box; width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/ZCEAmP9dHP_kQrMHZn32gcHDO7Y.jpg'); background-position:-350px -20px; transform:translate(350px,20px);}
    #dim7{box-sizing:border-box; width:200px; height:300px; border-radius:50%; background:url('http://ekladata.com/ULXmv8ACA0VWA5FK2FdX5YuiV6U.jpg'); background-position:-750px -20px; transform:translate(750px,20px) rotate(-15deg);}
    #dim1:hover,#dim2:hover,#dim3:hover,#dim4:hover,#dim5:hover,#dim6:hover,#dim7:hover{z-index:5; width:1000px; height:563px; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px) rotate(0deg); filter:sepia(0);}
    --></style>