• Art.27C.6.21

     Variante avec espace entre les sections; SURVOL.

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


    <p style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black;"><img id="clp1" class="cp" src="http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI@1000x562.jpg" alt="" /> <img id="clp2" class="cp" src="http://ekladata.com/JCdhCUWySPITb4JQCm9_tNhszrM@1000x562.jpg" alt="" /> <img id="clp3" class="cp" src="http://ekladata.com/UU_Ud75wfjZmeVqIURNjwv5Bhls@1000x562.jpg" alt="" /> <img id="clp4" class="cp" src="http://ekladata.com/Qu523ZjxV_XIBkTa_bvil2NG5Fw@1000x562.jpg" alt="" /> <img id="clp5" class="cp" src="http://ekladata.com/jqDTYIPAMfyK-nrJieLKupqScAQ@1000x562.jpg" alt="" /></p>
    <style><!--
    .cp{position:absolute; z-index:1; transition:all 1s;}
    #clp1{ clip-path: polygon(0% 0%, 18% 0%, 18% 100%, 0% 100%);}
    #clp2{clip-path: polygon(20% 0%, 38% 0%, 38% 100%, 20% 100%);}
    #clp3{clip-path: polygon(40% 0%, 58% 0%, 58% 100%, 40% 100%);}
    #clp4{clip-path: polygon(60% 0%, 78% 0%, 78% 100%, 60% 100%);}
    #clp5{clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%); }
    #clp1:hover,#clp2:hover,#clp3:hover,#clp4:hover,#clp5:hover{z-index:5; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    --></style>