• Mont.24.4.23

     Pour changer et voir si cela intéresse, j'ai agrandi le cadre en 1100px par 619px. Vous me direz si ça vous convient ou non ... merci d'avance !

    1 + 6 images au ratio 16/9.

     

     

    SURVOL

     

     

     

     

     

     


    <div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left; background: url('http://ekladata.com/7kYGTaAc8ed_VDVxRsbNn-E-Lqs.jpg'); background-size: cover; border: 1px solid black;">
    <p id="fg">&nbsp;</p>
    <p id="fd">&nbsp;</p>
    <p id="sv">SURVOL</p>
    <p id="pp1" class="pp">&nbsp;</p>
    <p id="pp2" class="pp">&nbsp;</p>
    <p id="pp3" class="pp">&nbsp;</p>
    <p id="pp4" class="pp">&nbsp;</p>
    <p id="pp5" class="pp">&nbsp;</p>
    <p id="pp6" class="pp">&nbsp;</p>
    </div>
    <style><!--
    #fg{position:absolute; z-index:1; width:100px; height:619px; background:rgba(0,0,0,0.5);}
    #fd{position:absolute; z-index:1; width:100px; height:619px; background:rgba(0,0,0,0.5); transform:translate(1000px,0px);}
    #sv{position:absolute; z-index:1; width:100px; font-size:20px; color:white; transform:translate(0px,10px); text-align:center;}
    .pp{position:absolute; z-index:1; width:160px; height:90px; border:3px solid white; transition:all 1s;}
    #pp1{box-sizing:border-box; background:url('http://ekladata.com/L4L5zMEemfhgom_NJjJtrur-Kpo.jpg'); background-size:cover; transform-origin:center left; transform:translate(0px,100px) perspective(200px) rotatey(30deg);}
    #pp2{box-sizing:border-box; background:url('http://ekladata.com/94Pj97gP8JMBfffvXk5epq29J_8.jpg'); background-size:cover; transform-origin:center left; transform:translate(0px,250px) perspective(200px) rotatey(30deg);}
    #pp3{box-sizing:border-box; background:url('http://ekladata.com/aZJJMErn8VWbXPyRMhJHXdk7Jx8.jpg'); background-size:cover; transform-origin:center left; transform:translate(0px,400px) perspective(200px) rotatey(30deg);}
    #pp4{box-sizing:border-box; background:url('http://ekladata.com/LwSVnf--fw2sCe9nBmUlg7TQTS8.jpg'); background-size:cover; transform-origin:center right; transform:translate(940px,100px) perspective(200px) rotatey(-30deg);}
    #pp5{box-sizing:border-box; background:url('http://ekladata.com/ABHxu6oMlnxvauKlGmM6DH7_qdA.jpg'); background-size:cover; transform-origin:center right; transform:translate(940px,250px) perspective(200px) rotatey(-30deg);}
    #pp6{box-sizing:border-box; background:url('http://ekladata.com/Q8CWjI3aV2w0ADsCiK_qrP-NxD8.jpg'); background-size:cover; transform-origin:center right; transform:translate(940px,400px) perspective(200px) rotatey(-30deg);}
    #pp1:hover,#pp2:hover,#pp3:hover,#pp4:hover,#pp5:hover,#pp6:hover{z-index:5; width:1100px; height:619px;transform:translate(0px,0px) perspective(5000px) rotatey(0deg);}
    --></style>