• Pour Jean-Marie

    Avec des images de chez lui, qu'il a lui même empruntées ! Montage en 800x600px.

    SURVOL

     

     

     

     

     


    <div style="width: 800px; height: 600px; text-align: left; margin: 30px auto;">
    <p id="aut0">SURVOL</p>
    <p id="aut1" class="aut">&nbsp;</p>
    <p id="aut2" class="aut">&nbsp;</p>
    <p id="aut3" class="aut">&nbsp;</p>
    <p id="aut4" class="aut">&nbsp;</p>
    <p id="aut5" class="aut">&nbsp;</p>
    </div>

    <style><!--
    #aut0{position:absolute; width:200px; text-align:center; font-size:30px; transform:translate(100px,380px);}
    .aut{position:absolute; width:300px; height:250px; border:5px solid white; background-size:800px 600px; filter:grayscale(0.8);box-shadow:4px 4px 6px black; transition:all 1s;}
    #aut1{box-sizing:border-box; background:url('http://ekladata.com/2STZIsl4LANZt9F09aH1GbjY13A@800x600.jpg'); background-position:0px 0px; transform:translate(0px,0px);}
    #aut2{box-sizing:border-box; background:url('http://ekladata.com/JqdgJhyprJGkYwqLbccVlFsvVrA@800x600.jpg'); background-position:-500px 0px; transform:translate(500px,0px);}
    #aut3{box-sizing:border-box; background:url('http://ekladata.com/u6uCZzEq0BK-jsNWr2PIuV0OAxA@800x600.jpg'); background-position:-500px -350px; transform:translate(500px,350px);}
    #aut4{box-sizing:border-box; background:url('http://ekladata.com/ZKaO1YjZj4TEGXLig47cE7kzhaY@800x600.jpg'); background-position:-0px -350px; transform:translate(0px,350px);}
    #aut5{box-sizing:border-box; background:url('http://ekladata.com/xXXVqP47Ne57xoOcK-C-1O2Rk1k@800x600.jpg'); background-position:-250px -175px; transform:translate(250px,175px);}
    #aut1:hover,#aut2:hover,#aut3:hover,#aut4:hover,#aut5:hover{z-index:5; width:800px; height:600px; background-position:0px 0px; filter:grayscale(0);transform:translate(0px,0px);}
    --></style>