• Art.15a.7.21

    5 images au ratio 16/9.

    Survol

     

     

     

     

    *******************


    <div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/xousA9JynIYwR0clzmLR9VC3zjI@1000x562.jpg'); background-size: cover;">
    <p id="at0">Survol</p>
    <p id="at1" class="at">&nbsp;</p>
    <p id="at2" class="at">&nbsp;</p>
    <p id="at3" class="at">&nbsp;</p>
    <p id="at4" class="at">&nbsp;</p>
    </div>
    <style><!--
    #at0{position:absolute; z-index:1; width:100px; text-align:center; background:rgba(0,0,0,0.5); font-size:25px; color:white; text-shadow:1px 1px black; transform:translate(200px,10px);}
    .at{position:absolute; z-index:1; background-size:1000px 562px; transition:all 1s;}
    #at1{background:url('http://ekladata.com/CwDseBJNYvFXvWny-aHLLM6AHEo@1000x562.jpg'); background-position:0px 0px; width:400px; height:281px;  transform-origin:top left; transform:translate(0px,0px) perspective(200px) rotatey(45deg);}
    #at2{background:url('http://ekladata.com/VCo5hBAQo9BiM0bHbxoEMDEffuo@1000x562.jpg'); background-position:0px -281px; width:400px; height:281px; transform-origin:bottom left; transform:translate(0px,281px) perspective(200px) rotatey(45deg);}
    #at3{background:url('http://ekladata.com/UKl7vdyZS6RYga7W-AS30BxGl5w@1000x562.jpg'); background-position:-600px 0px; width:400px; height:281px; transform-origin:top right; transform:translate(600px,0px) perspective(200px) rotatey(-45deg);}
    #at4{background:url('http://ekladata.com/OJyvLy9pBtCSRqVBk0aiS_ngivI@1000x562.jpg'); background-position:-600px -281px; width:400px; height:281px; transform-origin:bottom right; transform:translate(600px,281px) perspective(200px) rotatey(-45deg);}
    #at1:hover,#at2:hover,#at3:hover,#at4:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
    --></style>