• 22.02.2024

    Montage en 800x600px, avec 2 images verticales et 3 images horizontales.

    SURVOL

     

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 50px auto; text-align: left;">
    <p id="lac0">SURVOL</p>
    <p id="lac1" class="lac">&nbsp;</p>
    <p id="lac2" class="lac">&nbsp;</p>
    <p id="lac3" class="lac">&nbsp;</p>
    <p id="lac4" class="lac">&nbsp;</p>
    <p id="lac5" class="lac">&nbsp;</p>
    </div>
    <style><!--
    #lac0{position:absolute; z-index:1; width:150px; font-size:30px; transform:translate(325px,0px);}
    .lac{position:absolute; z-index:1; filter:grayscale(1); transition:all 1s;}
    #lac1{width:250px; height:400px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/R2aBaCRRXRoPdJRvLHLnZb1HIpU.jpg'); background-size:330px 600px; background-position:-0px -120px; transform:translate(0px,120px) rotatey(85deg);}
    #lac2{width:250px; height:400px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/jX4h8r3XtdEUu9_XEmzkLGtNhlQ.jpg'); background-size:330px 600px; background-position:-0px -120px; transform:translate(550px,120px) rotatey(-85deg);}
    #lac3{width:400px; height:250px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/i0GxHj-csMc2aysgq-9bNDHQjdA.jpg'); background-size:800px 600px; background-position:-200px 0px; transform:translate(200px,0px) rotatex(-85deg);}
    #lac4{width:400px; height:250px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/JkyBVE7Pl6QoUAqGQ2urWHhcXkU.jpg'); background-size:800px 600px; background-position:-200px -200px; transform:translate(200px,200px) rotatex(-85deg);}
    #lac5{width:400px; height:250px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/Lvh_nztxOv2ioJ5Q7mzs04N8Igs.jpg'); background-size:800px 600px; background-position:-200px -400px; transform:translate(200px,400px) rotatex(-85deg);}
    #lac1:hover{z-index:5; width:330px; height:600px; filter:grayscale(0);background-position:0px 0px; transform:translate(0px,0px) rotatey(0deg);}
    #lac2:hover{z-index:5; width:330px; height:600px; filter:grayscale(0);background-position:0px 0px; transform:translate(470px,0px) rotatey(0deg);}
    #lac3:hover,#lac4:hover,#lac5:hover{z-index:5; width:800px; height:600px; filter:grayscale(0);background-position:0px 0px; transform:translate(0px,0px) rotatex(0deg);}
    --></style>