• Carrés

    7 images au ratio 16/9

    SURVOL

     

     

     

     

     

     

     

    <div style="width: 800px; height: 450px; margin: 30px auto; text-align: left;">
    <p id="bal0">SURVOL</p>
    <p id="bal1" class="bal">&nbsp;</p>
    <p id="bal2" class="bal">&nbsp;</p>
    <p id="bal3" class="bal">&nbsp;</p>
    <p id="bal4" class="bal">&nbsp;</p>
    <p id="bal5" class="bal">&nbsp;</p>
    <p id="bal6" class="bal">&nbsp;</p>
    <p id="bal7" class="bal">&nbsp;</p>
    </div>

    <style><!--
    #bal0{ position:absolute; z-index:1; width:150px; transform:translate(20px,20px); font-size:30px;}
    .bal{position:absolute; z-index:1; width:150px; height:150px; border:4px solid white; transition:all 1s;}
    #bal1{box-sizing:border-box; background:url('http://ekladata.com/sfBAn46JvMT0poYwQX91SWdOCTI.jpg');background-size:800px 450px;  background-position:-100px -150px; transform:translate(100px,150px) rotate(45deg);}
    #bal2{box-sizing:border-box; background:url('http://ekladata.com/h1NwRyLAlUJ5loa6h37lmmhu8ZM.jpg');background-size:800px 450px;  background-position:-210px -40px; transform:translate(210px,40px) rotate(45deg);}
    #bal3{box-sizing:border-box; background:url('http://ekladata.com/iCAn0Jxa6_nQptGPQdnCMs7cvv8.jpg');background-size:800px 450px;  background-position:-210px -260px; transform:translate(210px,260px) rotate(45deg);}
    #bal4{box-sizing:border-box; background:url('http://ekladata.com/iwqvztq3PxyGzTKv4R8WcMZL8K4.jpg');background-size:800px 450px;  background-position:-320px -150px; transform:translate(320px,150px) rotate(45deg);}
    #bal5{box-sizing:border-box; background:url('http://ekladata.com/Y1qn7s_VT1b6Kn_7G6W10iRqr9A.jpg'); background-size:800px 450px; background-position:-430px -40px; transform:translate(430px,40px) rotate(45deg);}
    #bal6{box-sizing:border-box; background:url('http://ekladata.com/mfPvF1cu8UYgfGEhiw5btZTRuh8.jpg');background-size:800px 450px;  background-position:-430px -260px; transform:translate(430px,260px) rotate(45deg);}
    #bal7{box-sizing:border-box; background:url('http://ekladata.com/m07BlvR1_ZPzHfhXZMlK0BAGHLE.jpg');background-size:800px 450px;  background-position:-540px -150px; transform:translate(540px,150px) rotate(45deg);}
    #bal1:hover,#bal2:hover,#bal3:hover,#bal4:hover,#bal5:hover,#bal6:hover,#bal7:hover{z-index:5; width:800px; height:450px; background-position:0px 0px; transform:translate(0px,0px) rotate(0deg);}
    --></style>