• 24a.04.2024

    1+6 images dans un montage de 1000x563px (16/9).

    Par facilité, j'utilise des images horizontales mais un mélange H/V est possible, de même qu'un changement de dimensions du montage.

     

    SURVOL

     

     

     

     

     

     


    <div style="position: relative; overflow: hidden; width: 1000px; height: 563px; border: 1px solid black; margin: 50px auto; text-align: left;">
    <p id="fd">&nbsp;</p>
    <p id="sv">SURVOL</p>
    <p id="trg1" class="trg">&nbsp;</p>
    <p id="trg2" class="trg">&nbsp;</p>
    <p id="trg3" class="trg">&nbsp;</p>
    <p id="trg4" class="trg">&nbsp;</p>
    <p id="trg5" class="trg">&nbsp;</p>
    <p id="trg6" class="trg">&nbsp;</p>
    </div>
    <style><!--
    #fd{position:absolute; z-index:1; width:1000px; height:563px; background:url('http://ekladata.com/zKKBimKK0_lYqm1frmOkqPEq62s.jpg'); background-size:cover;}
    #sv{position:absolute; z-index:1; width:140px; font-size:30px; color:white; background:rgba(0,0,0,0.7); text-shadow:2px 2px black; transform:translate(425px,260px);}
    .trg{position:absolute; z-index:1; width:1000px; height:563px; filter:grayscale(1); border:4px solid white; transition:all 1s;}
    #trg1{box-sizing:border-box; background:url('http://ekladata.com/wGuU3-GTQfkxlCUxQTiNQ1mKLvQ.jpg'); background-size:cover; transform:translate(-170px,-680px) rotate(-45deg);}
    #trg2{box-sizing:border-box; background:url('http://ekladata.com/u9yAoerVsOmQGqIeZaeVMNEgNrA.jpg'); background-size:cover; transform:translate(150px,-680px) rotate(-45deg);}
    #trg3{box-sizing:border-box; background:url('http://ekladata.com/midKpcaLP1YGGh14Zi0sRGF6IG8.jpg'); background-size:cover; transform:translate(470px,-680px) rotate(-45deg);}
    #trg4{box-sizing:border-box; background:url('http://ekladata.com/JF-LmXetq2QpvTxATf6s6_bCv_s.jpg'); background-size:cover; transform:translate(-170px,680px) rotate(45deg);}
    #trg5{box-sizing:border-box; background:url('http://ekladata.com/VsQwMBonfY4A9gCnq7G4e0xo2E0.jpg'); background-size:cover; transform:translate(150px,680px) rotate(45deg);}
    #trg6{box-sizing:border-box; background:url('http://ekladata.com/KdjNYRIULge25KAETJ_vO0XZHFI.jpg'); background-size:cover; transform:translate(470px,680px) rotate(45deg);}
    #trg1:hover,#trg2:hover,#trg3:hover,#trg4:hover,#trg5:hover,#trg6:hover{z-index:10;filter:grayscale(0); transform:translate(0px,0px) rotate(0deg);}
    --></style>