• 20.04.2024

    Montage en 1000x564px (16/9) pour 6 images.

     

    SURVOL

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 564px; margin: 50px auto; text-align: left; border: 6px solid white; box-shadow: 4px 4px 8px black;">
    <p id="camp0">&nbsp;</p>
    <p id="sv">SURVOL</p>
    <p id="camp1a" class="campa">&nbsp;</p>
    <p id="camp1b" class="campa">&nbsp;</p>
    <p id="camp1c" class="campa">&nbsp;</p>
    <p id="camp2a" class="campb">&nbsp;</p>
    <p id="camp2b" class="campb">&nbsp;</p>
    <p id="camp2c" class="campb">&nbsp;</p>
    <p id="camp3a" class="campc">&nbsp;</p>
    <p id="camp3b" class="campc">&nbsp;</p>
    <p id="camp3c" class="campc">&nbsp;</p>
    <p id="camp4a" class="campd">&nbsp;</p>
    <p id="camp4b" class="campd">&nbsp;</p>
    <p id="camp4c" class="campd">&nbsp;</p>
    <p id="camp5a" class="campe">&nbsp;</p>
    <p id="camp5b" class="campe">&nbsp;</p>
    <p id="camp5c" class="campe">&nbsp;</p>
    <p id="camp6a" class="campf">&nbsp;</p>
    <p id="camp6b" class="campf">&nbsp;</p>
    <p id="camp6c" class="campf">&nbsp;</p>
    </div>
    <style><!--
    #camp0{position:absolute; z-index:1; width:1000px; height:564px; background:url('http://ekladata.com/uxHPhsy3shYbLtYU5hdejnaOPHI.jpg'); background-size:1000px 564px; opacity:0.5;}
    #sv{position:absolute; z-index:1; width:120px; font-size:25px; transform:translate(440px,10px);}
    .campa{position:absolute; z-index:1; background:url('http://ekladata.com/wGuU3-GTQfkxlCUxQTiNQ1mKLvQ.jpg'); background-size:1000px 564px; transition:all 1s;}
    #camp1a{box-sizing:border-box; border:3px solid black; width:200px; height:188px; background-position:-200px 0px; transform:translate(200px, 0px);}
    #camp1b{width:0px; height:564px; background-position:0px 0px; transform:translate(0px, 0px);}
    #camp1c{width:0px; height:564px; background-position:-1000px 0px; transform:translate(1000px, 0px);}

    .campb{position:absolute; z-index:1; background:url('http://ekladata.com/u9yAoerVsOmQGqIeZaeVMNEgNrA.jpg'); background-size:1000px 564px; transition:all 1s;}
    #camp2a{box-sizing:border-box; border:3px solid black; width:200px; height:188px; background-position:-200px -188px; transform:translate(200px, 188px);}
    #camp2b{width:0px; height:564px; background-position:0px 0px; transform:translate(0px, 0px);}
    #camp2c{width:0px; height:564px; background-position:-1000px 0px; transform:translate(1000px, 0px);}

    .campc{position:absolute; z-index:1; background:url('http://ekladata.com/midKpcaLP1YGGh14Zi0sRGF6IG8.jpg'); background-size:1000px 564px; transition:all 1s;}
    #camp3a{box-sizing:border-box; border:3px solid black; width:200px; height:188px; background-position:-200px -376px; transform:translate(200px, 376px);}
    #camp3b{width:0px; height:564px; background-position:0px 0px; transform:translate(0px, 0px);}
    #camp3c{width:0px; height:564px; background-position:-1000px 0px; transform:translate(1000px, 0px);}

    #camp1a:hover,#camp2a:hover,#camp3a:hover{z-index:5; border:none; height:564px; background-position:-200px 0px; transform:translate(200px,0px);}
    #camp1a:hover~#camp1b,#camp2a:hover~#camp2b,#camp3a:hover~#camp3b{z-index:5; border:none; width:200px; background-position:0px 0px; transform:translate(0px,0px);}
    #camp1a:hover~#camp1c,#camp2a:hover~#camp2c,#camp3a:hover~#camp3c{z-index:5; border:none; width:600px; background-position:-400px 0px; transform:translate(400px,0px);}

    .campd{position:absolute; z-index:1; background:url('http://ekladata.com/JF-LmXetq2QpvTxATf6s6_bCv_s.jpg'); background-size:1000px 564px; transition:all 1s;}
    #camp4a{box-sizing:border-box; border:3px solid black; width:200px; height:188px; background-position:-600px 0px; transform:translate(600px, 0px);}
    #camp4b{width:0px; height:564px; background-position:0px 0px; transform:translate(0px, 0px);}
    #camp4c{width:0px; height:564px; background-position:-1000px 0px; transform:translate(1000px, 0px);}

    .campe{position:absolute; z-index:1; background:url('http://ekladata.com/VsQwMBonfY4A9gCnq7G4e0xo2E0.jpg'); background-size:1000px 564px; transition:all 1s;}
    #camp5a{box-sizing:border-box; border:3px solid black; width:200px; height:188px; background-position:-600px -188px; transform:translate(600px, 188px);}
    #camp5b{width:0px; height:564px; background-position:0px 0px; transform:translate(0px, 0px);}
    #camp5c{width:0px; height:564px; background-position:-1000px 0px; transform:translate(1000px, 0px);}

    .campf{position:absolute; z-index:1; background:url('http://ekladata.com/KdjNYRIULge25KAETJ_vO0XZHFI.jpg'); background-size:1000px 564px; transition:all 1s;}
    #camp6a{box-sizing:border-box; border:3px solid black; width:200px; height:188px; background-position:-600px -376px; transform:translate(600px, 376px);}
    #camp6b{width:0px; height:564px; background-position:0px 0px; transform:translate(0px, 0px);}
    #camp6c{width:0px; height:564px; background-position:-1000px 0px; transform:translate(1000px, 0px);}

    #camp4a:hover,#camp5a:hover,#camp6a:hover{z-index:5; border:none; height:564px; background-position:-600px 0px; transform:translate(600px,0px);}
    #camp4a:hover~#camp4b,#camp5a:hover~#camp5b,#camp6a:hover~#camp6b{z-index:5; border:none; width:600px; background-position:0px 0px; transform:translate(0px,0px);}
    #camp4a:hover~#camp4c,#camp5a:hover~#camp5c,#camp6a:hover~#camp6c{z-index:5; border:none; width:200px; background-position:-800px 0px; transform:translate(800px,0px);}
    --></style>