• 30a.04.2024

    6 images, ici au ratio 16/9 mais modifiable, dans un montage de 1100px par 619px. 

    SURVOL

     

     

     

     

     

     


    <div style="width: 1100px; height: 619px; margin: 50px auto; text-align: left; border: 6px ridge white; box-shadow: 6px 6px 8px black; background: url('http://ekladata.com/zmAXeJ38JO4TC1ZCYlLnUOceKdw/00007.jpg'); backgrouns-size: cover;">
    <p id="sv">SURVOL</p>
    <p id="pap1" class="pap">&nbsp;</p>
    <p id="pap2" class="pap">&nbsp;</p>
    <p id="pap3" class="pap">&nbsp;</p>
    <p id="pap4" class="pap">&nbsp;</p>
    <p id="pap5" class="pap">&nbsp;</p>
    <p id="pap6" class="pap">&nbsp;</p>
    </div>
    <style><!--
    #sv{position:absolute; z-index:1; width:150px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(500px,20px);}
    .pap{position:absolute; z-index:1; width:1100px; height:619px; filter:grayscale(1); transition:all 1s;}
    #pap1{background:url('http://ekladata.com/ipq0dAlnFvh5cifrEAsC9--Hmnk.jpg'); background-size:cover; clip-path:polygon(100px 50px,275px 100px,450px 50px, 500px 100px,450px 150px,275px 100px, 100px 150px, 50px 100px);}
    #pap2{background:url('http://ekladata.com/H4Y7Tf7JkAR7Eb5h0mC5eAPyXhM.jpg'); background-size:cover; clip-path:polygon(650px 50px,825px 100px,1000px 50px, 1050px 100px,1000px 150px,825px 100px, 650px 150px, 600px 100px);}
    #pap3{background:url('http://ekladata.com/8ndwJQyxpwmTIwysZP4I4E4w-tI.jpg'); background-size:cover; clip-path:polygon(100px 250px,275px 300px,450px 250px, 500px 300px,450px 350px,275px 300px, 100px 350px, 50px 300px);}
    #pap4{background:url('http://ekladata.com/HQFD3gImkn0oKJEKsGcqyvd_r30.jpg'); background-size:cover; clip-path:polygon(650px 250px,825px 300px,1000px 250px, 1050px 300px,1000px 350px,825px 300px, 650px 350px, 600px 300px);}
    #pap5{background:url('http://ekladata.com/CQuOdynLA3R9sboGNOnonu2NDz4.jpg'); background-size:cover; clip-path:polygon(100px 450px,275px 500px,450px 450px, 500px 500px,450px 550px,275px 500px, 100px 550px, 50px 500px);}
    #pap6{background:url('http://ekladata.com/PekMo41VMevB2WcAhbx6oPpNkS8.jpg'); background-size:cover; clip-path:polygon(650px 450px,825px 500px,1000px 450px, 1050px 500px,1000px 550px,825px 500px, 650px 550px, 600px 500px);}
    #pap1:hover,#pap2:hover,#pap3:hover,#pap4:hover,#pap5:hover,#pap6:hover{z-index:5; clip-path:polygon(0px 0px,550px 0px,1100px 0px, 1100px 310px,1100px 619px,550px 619px, 0px 619px, 0px 310px); filter:grayscale(0);}
    --></style>