• 26.04.2024

    6 images horizontales dans un montage de 1000x563px modifiable à vos dimensions; on peut modifier le code pour y placer une ou plusieurs images verticales.

    SURVOL

     

     

     

     

     

     


    <div style="position: relative; overflow: hidden; width: 1000px; height: 563px; margin: 50px auto; text-align: left; border: 4px solid white; box-shadow: 4px 4px 8px black; background: url('http://ekladata.com/EC7ehnSwYEUC3G8QzJvO4qs5IeI/dogclay.jpg');">
    <p id="sv">SURVOL</p>
    <p id="pl1" class="pl">&nbsp;</p>
    <p id="pl2" class="pl">&nbsp;</p>
    <p id="pl3" class="pl">&nbsp;</p>
    <p id="pl4" class="pl">&nbsp;</p>
    <p id="pl5" class="pl">&nbsp;</p>
    <p id="pl6" class="pl">&nbsp;</p>
    </div>

    <style><!--
    #sv{position:absolute; z-index:1; width:12opx; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(400px,240px) rotate(25deg);}
    .pl{position:absolute; z-index:1; width:1000px; height:563px; border:4px solid white; transition:all 1s;}
    #pl1{box-sizing:border-box;background:url('http://ekladata.com/wOpxl3Vrz7cLzzdgZ_T00gmMkak.jpg'); background-size:cover; transform:translate(0px,-350px) rotate(25deg);}
    #pl2{box-sizing:border-box; background:url('http://ekladata.com/7Tn8wdLetlYpnhtezrcbp1GCuyM.jpg'); background-size:cover; transform:translate(400px,-165px) rotate(25deg);}
    #pl3{box-sizing:border-box; background:url('http://ekladata.com/taayApjgYqYAQ_dXmDwagFcYI74.jpg'); background-size:cover; transform:translate(800px,20px) rotate(25deg);}
    #pl4{box-sizing:border-box; background:url('http://ekladata.com/KjjtlerbepFhWcsfBs_qucEeYzE.jpg'); background-size:cover; transform:translate(-200px,250px) rotate(25deg);}
    #pl5{box-sizing:border-box; background:url('http://ekladata.com/OGKMIV3jJSynn4t45JGxNweJQO4.jpg'); background-size:cover; transform:translate(200px,435px) rotate(25deg);}
    #pl6{box-sizing:border-box; background:url('http://ekladata.com/TxvGLhLLjQQxtoBiwWvhxfRHFWk.jpg'); background-size:cover; transform:translate(550px,600px) rotate(25deg);}
    #pl1:hover,#pl2:hover,#pl3:hover,#pl4:hover,#pl5:hover,#pl6:hover{z-index:15; transform:translate(0px,0px) rotate(0deg);}
    --></style>