• 27.10.23

    4 images au ratio 16/9, dimensionnées  en 1200x675px (@1200x675.jpg)

     

    SURVOL

     

     

     

     


    <div style="width: 1200px; height: 675px; border: 4px ridge white; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left;">
    <p id="cx">&nbsp;</p>
    <p id="cx0">SURVOL</p>
    <p id="cx1" class="anc">&nbsp;</p>
    <p id="cx2" class="anc">&nbsp;</p>
    <p id="cx3" class="anc">&nbsp;</p>
    <p id="cx4" class="anc">&nbsp;</p>
    </div>

    <style><!--
    #cx{position:absolute; z-index:5; width:1200px; height:675px; background:url('http://ekladata.com/uReCxkJnv46giiBtS-c6ovfN6CY/img728.gif');clip-path:polygon(0px 0px, 600px 280px,1200px 0px,1200px 90px, 680px 332px,1200px 585px,1200px 675px,600px 380px,0px 675px,0px 585px, 520px 332px,0px 90px);}
    #cx0{position:absolute; z-index:7; width:150px; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(50px,80px) rotate(25deg);}
    .anc{position:absolute; z-index:1; width:1200px; height:675px; transition:all 1s;}
    #cx1{background:url('http://ekladata.com/k5MEraYKu1CEof7cb3pghWrfZ_E@1200x675.jpg'); clip-path:polygon(0px 0px, 1200px 0px, 600px 280px, 600px 280px);}
    #cx2{background:url('http://ekladata.com/82UWuO0DGsSX51VD9JuYglcap68@1200x675.jpg'); clip-path:polygon(680px 332px, 1200px 90px, 1200px 585px, 1200px 585px);}
    #cx3{background:url('http://ekladata.com/HKFU7wsyKt6V5Y4PJY9DbkCHkwI@1200x675.jpg'); clip-path:polygon(600px 380px, 600px 380px, 1200px 675px, 0px 675px);}
    #cx4{background:url('http://ekladata.com/fmzav2vAKjNYd3DXy-QKN-V74C4@1200x675.jpg'); clip-path:polygon(0px 90px, 520px 332px, 520px 332px, 0px 585px);}
    #cx1:hover,#cx2:hover,#cx3:hover,#cx4:hover{z-index:10; clip-path:polygon(0px 0px, 1200px 0px, 1200px 675px, 0px 675px);}
    --></style>