• Art.6A.6.21

    5 images au ratio 16/9.

    Survol

     

     

     

     

    <div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 20px auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/c47_wreLSMCJRMiBHHeliuM72bM.jpg'); background-size: cover;">
    <p id="bis0">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>
    </div>
    <style><!--
    #bis0{position:absolute; z-index:1; width:130px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(430px,10px);}
    .bis{position:absolute; z-index:1; width:1000px; height:562px; border:4px solid white; transition:all 1s linear;}
    #bis1{box-sizing:border-box; background:url('http://ekladata.com/_xxdTQEibEG1XCVBQOEIwwMBjd4.jpg'); background-size:1000px 562px; transform:translate(-900px,-310px) rotate(45deg);}
    #bis2{box-sizing:border-box; background:url('http://ekladata.com/GfELYSw1HXNo8JCeaws0mPdelAU.jpg'); background-size:1000px 562px; transform:translate(-900px,-10px) rotate(45deg);}
    #bis3{box-sizing:border-box; background:url('http://ekladata.com/Q0kQcQ_-kY4ktX8Qd0c0NcExWXs.jpg'); background-size:1000px 562px; transform:translate(900px,0px) rotate(45deg);}
    #bis4{box-sizing:border-box; background:url('http://ekladata.com/Z6Q-NbsSaEfx4XQgWmAkF271S7c.jpg'); background-size:1000px 562px; transform:translate(900px,300px) rotate(45deg);}
    #bis1:hover,#bis2:hover,#bis3:hover,#bis4:hover{z-index:5;transform:translate(0px,0px) rotate(0deg);}
    --></style>