• Mont.18.6.23

    8 +1 images au ratio 16/9, en 1100x619px.

    SURVOL

     

     

     

     

     

     

     

     

     


    <div style="width: 1100px; height: 619px; border: 4px solid white; box-shadow: 4px 4px 6px black; margin: 30px auto; text-align: left;">
    <p id="kl0" class="kl">SURVOL</p>
    <p id="kl1" class="kl">&nbsp;</p>
    <p id="kl2" class="kl">&nbsp;</p>
    <p id="kl3" class="kl">&nbsp;</p>
    <p id="kl4" class="kl">&nbsp;</p>
    <p id="kl5" class="kl">&nbsp;</p>
    <p id="kl6" class="kl">&nbsp;</p>
    <p id="kl7" class="kl">&nbsp;</p>
    <p id="kl8" class="kl">&nbsp;</p>
    <p id="gm">&nbsp;</p>
    </div>

    <style><!--
    .kl{position:absolute; width:80px; height:45px; border:2px solid white; box-shadow:2px 2px 4px black;}
    #kl0{width:100px; text-align:center; line-height:45px; font-size:20px; transform:translate(0px,640px);}
    #kl1{background:url('http://ekladata.com/YzES0fCgsPoJV-6kqAE6Xg_400w.jpg'); background-size:cover; transform:translate(150px,640px);}
    #kl2{background:url('http://ekladata.com/8wgjeUMzZ3uvXQzSouj0WTxEhPA.jpg'); background-size:cover; transform:translate(250px,640px);}
    #kl3{background:url('http://ekladata.com/xgmo4Wtbg8xDTIY9hf457ToyWqc.jpg'); background-size:cover; transform:translate(350px,640px);}
    #kl4{background:url('http://ekladata.com/v3BtO9hNP9dwYpwBewX9EtImvKM.jpg'); background-size:cover; transform:translate(450px,640px);}
    #kl5{background:url('http://ekladata.com/R1a1PE4K0TIIgq3YsoxqizBKPP8.jpg'); background-size:cover; transform:translate(550px,640px);}
    #kl6{background:url('http://ekladata.com/6hVU23oQCFwslPOc9KJ6DmuRYEs.jpg'); background-size:cover; transform:translate(650px,640px);}
    #kl7{background:url('http://ekladata.com/-AwKIXnlcxZaYtXbvvvMKkz0ShU.jpg'); background-size:cover; transform:translate(750px,640px);}
    #kl8{background:url('http://ekladata.com/5cePZu8FtS08GkMFCGg6N1ZyruI.jpg'); background-size:cover; transform:translate(850px,640px);}
    #gm{position:absolute; width:1100px; height:619px; background:url('http://ekladata.com/C3Uk8CIWVAmC3dObeh6ygB2-8MY.jpg'); background-size:cover; transform:translate(0px,0px);}
    #kl1:hover ~ #gm{background:url('http://ekladata.com/YzES0fCgsPoJV-6kqAE6Xg_400w.jpg'); background-size:cover;}
    #kl2:hover ~ #gm{background:url('http://ekladata.com/8wgjeUMzZ3uvXQzSouj0WTxEhPA.jpg'); background-size:cover;}
    #kl3:hover ~ #gm{background:url('http://ekladata.com/xgmo4Wtbg8xDTIY9hf457ToyWqc.jpg'); background-size:cover;}
    #kl4:hover ~ #gm{background:url('http://ekladata.com/v3BtO9hNP9dwYpwBewX9EtImvKM.jpg'); background-size:cover;}
    #kl5:hover ~ #gm{background:url('http://ekladata.com/R1a1PE4K0TIIgq3YsoxqizBKPP8.jpg'); background-size:cover;}
    #kl6:hover ~ #gm{background:url('http://ekladata.com/6hVU23oQCFwslPOc9KJ6DmuRYEs.jpg'); background-size:cover;}
    #kl7:hover ~ #gm{background:url('http://ekladata.com/-AwKIXnlcxZaYtXbvvvMKkz0ShU.jpg'); background-size:cover;}
    #kl8:hover ~ #gm{background:url('http://ekladata.com/5cePZu8FtS08GkMFCGg6N1ZyruI.jpg'); background-size:cover;}
    --></style>