• 07.01.2024

     1 + 5 images en 800x600px à partir de mes images déformées à l'origine en 1000x619px.

     

    SURVOL

     

     

     

     

     


    <div style="position: relative; width: 800px; height: 600px; border: 4px ridge white; box-shadow: 4px 4px 8px black; text-align: left; margin: 30px auto; background: url('http://ekladata.com/c9jpOPZCfV7Qqe0RFQ3h7r4y35k.jpg'); background-size: cover;">
    <p id="rem0">&nbsp;</p>
    <p id="rem1">SURVOL</p>
    <p id="rem2" class="rem">&nbsp;</p>
    <p id="rem3" class="rem">&nbsp;</p>
    <p id="rem4" class="rem">&nbsp;</p>
    <p id="rem5" class="rem">&nbsp;</p>
    <p id="rem6" class="rem">&nbsp;</p>
    </div>

    <style><!--
    #rem0{position:absolute; z-index:1; width:100px; height:600px; background:rgba(0,0,0,0.4);}
    #rem1{position:absolute; z-index:1; width:100px; font-size:20px; color:white; text-shadow:1px 1px black;}
    .rem{position:absolute; z-index:1; width:80px; height:45px; border:2px solid white; transition:width 1s 0s, height 1s 1s, background 1s 1s, margin 1s 0s, transform 1s 1s;}
    #rem2{box-sizing:border-box; background:url('http://ekladata.com/bam54fIr5WpxKXaL4vMIV2LAtzU.jpg'); background-size:800px 600px; background-position:0px -100px; transform:translate(0px,100px); margin-left:10px;}
    #rem3{box-sizing:border-box; background:url('http://ekladata.com/W7sol3JyvXdwvObov_1VIrtZN9c.jpg'); background-size:800px 600px; background-position:0px -200px; transform:translate(0px,200px); margin-left:10px;}
    #rem4{box-sizing:border-box; background:url('http://ekladata.com/MT8pWEnRHS-j7oXVk1R-afzT5mw.jpg'); background-size:800px 600px; background-position:0px -300px; transform:translate(0px,300px); margin-left:10px;}
    #rem5{box-sizing:border-box; background:url('http://ekladata.com/j-8KSQ8QDK5TuvOjJh1_vPG33OA.jpg'); background-size:800px 600px; background-position:0px -400px; transform:translate(0px,400px); margin-left:10px;}
    #rem6{box-sizing:border-box; background:url('http://ekladata.com/wbp8CeT_GGIK8MSLvPlf4fotMuk.jpg'); background-size:800px 600px; background-position:0px -500px; transform:translate(0px,500px); margin-left:10px;}
    #rem2:hover,#rem3:hover,#rem4:hover,#rem5:hover,#rem6:hover{z-index:5; width:800px; height:600px; border:non; background-position: 0px 0px; transform:translate(0px,0px); margin-left:0px;}
    --></style>