• Montage 201

     8 images au ratio 16/9.

    Survol

     

     

     

     

     

     

     

     

    <div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; border: 1px solid black; background: white; overflow: hidden;">
    <p id="svl">Survol</p>
    <p id="bis1" class="bis">&nbsp;</p>
    <p id="bis2" class="bis">&nbsp;</p>
    <p id="bis3" class="bis">&nbsp;</p>
    <p id="bis4" class="bis">&nbsp;</p>
    <p id="bis5" class="bis">&nbsp;</p>
    <p id="bis6" class="bis">&nbsp;</p>
    <p id="bis7" class="bis">&nbsp;</p>
    <p id="bis8" class="bis">&nbsp;</p>
    </div>

    <style><!--
    #svl{position:absolute; z-index:1; width:140px; height:50px; transform:translate(465px,250px); font-size:40px; color:coral; text-shadow:2px 2px black;}
    .bis{position:absolute; z-index:1; width:1000px; height:563px; border:4px ridge white;transition:all 1s linear;}
    #bis1{box-sizing:border-box; background:url('http://ekladata.com/I9NfRzaUEhHpd83lERr0jQNgcCI.jpg'); background-size:1000px 563px; transform:translate(-600px,150px) rotate(-45deg);}
    #bis2{box-sizing:border-box; background:url('http://ekladata.com/VkLSTUU0sKI-iYMXAjcqU0ftxnI.jpg'); background-size:1000px 563px; transform:translate(180px,-630px) rotate(-45deg);}
    #bis3{box-sizing:border-box; background:url('http://ekladata.com/6nq5FHTUqtYFB8v9T-XOPW6JQe8.jpg'); background-size:1000px 563px; transform:translate(660px,150px) rotate(45deg);}
    #bis4{box-sizing:border-box; background:url('http://ekladata.com/4OR0WpuUS46IKX2jmFMG3yzDnqs.jpg'); background-size:1000px 563px; transform:translate(180px,620px) rotate(45deg);}
    #bis5{box-sizing:border-box; background:url('http://ekladata.com/x0a7pA0dzh2g0Dh3hgHN1k3s_pg.jpg'); background-size:1000px 563px; transform:translate(-730px,150px) rotate(-45deg);}
    #bis6{box-sizing:border-box; background:url('http://ekladata.com/VSb4XH9gaEnRRIyExnYH2zW9Auw.jpg'); background-size:1000px 563px; transform:translate(180px,-750px) rotate(-45deg);}
    #bis7{box-sizing:border-box; background:url('http://ekladata.com/hxwb1UoDdgo4zeSLC22kLhesELU.jpg'); background-size:1000px 563px; transform:translate(790px,150px) rotate(45deg);}
    #bis8{box-sizing:border-box; background:url('http://ekladata.com/pCl1Vr6Ous27dz9-jxBw7GcRARk.jpg'); background-size:1000px 563px; transform:translate(180px,750px) rotate(45deg);}
    #bis1:hover,#bis2:hover,#bis3:hover,#bis4:hover,#bis5:hover,#bis6:hover,#bis7:hover,#bis8:hover{z-index:5; transform:translate(0px,0px) rotate(0deg);}
    --></style>