• Art.18B.6.21

    4 images au ratio 16/9.

     

     

     

     

    SURVOL

    <p>&nbsp;</p>
    <div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left;">
    <p id="ov1" class="ov">&nbsp;</p>
    <p id="ov2" class="ov">&nbsp;</p>
    <p id="ov3" class="ov">&nbsp;</p>
    <p id="ov4" class="ov">&nbsp;</p>
    <p id="ov5">SURVOL</p>
    </div>

    <style><!--
    .ov{position:absolute; z-index:1; width:500px; height:281px; filter:grayscale(1); transition:all 1s;}
    #ov1{background:url('http://ekladata.com/p_4bmvTV7LWpcFkbhX9krh3iy58.jpg'); background-size:1000px 562px; background-position:0px 0px; transform:translate(0px,0px); border-radius:100% 0;}
    #ov2{background:url('http://ekladata.com/gF3gQdwuAVORohfSIMxkylQx7o4.jpg'); background-size:1000px 562px; background-position:-500px 0px; transform:translate(500px, 0px); border-radius:0 100%;}
    #ov3{background:url('http://ekladata.com/QBV7jbmomgrbgwH8gu91HFKfSWQ.jpg'); background-size:1000px 562px; background-position:-500px -281px; transform:translate(500px,281px); border-radius:100% 0;}
    #ov4{background:url('http://ekladata.com/yPXvfB-39jDPM9IBs8Bzkm_In9Q.jpg'); background-size:1000px 562px; background-position:0px -281px; transform:translate(0px, 281px); border-radius:0 100%;}
    #ov5{position:absolute; z-index:1; width:200px; height:60px; text-align:center; font-size:30px; color:coral; text-shadow:2px 2px black; transform:translate(400px,250px);}
    #ov1:hover,#ov2:hover,#ov3:hover,#ov4:hover{z-index:5; width:1000px; height:562px; filter:grayscale(0); background-position:0px 0px; transform:translate(0px,0px); border-radius:0;}
    --></style>