• Exemple 80

    Ce type de montage doit être adapté à votre image de fond, qui est obtenue par déformation d'une image par un logiciel de traitement d'image.

    Les cordonnées des angles des triangles sont obtenues par ce logiciel; si vous conservez mes valeurs, vous pouvez simplement changer l'adresse des images, qui sont dimensionnées en 1000x563px.

    Survolez les 6 triangles de couleur non unie.

     

     

     

     

     

     


    <div style="width:1000px; height:563px; margin:5px auto; text-align:left; border:1px solid black; background:url('http://ekladata.com/IBAKmahXjCsdGfu2b3rfvp07H5g@1000x563.jpg'); background-size:cover;">
    <p id="nov1" class="nov">&nbsp;</p>
    <p id="nov2" class="nov">&nbsp;</p>
    <p id="nov3" class="nov">&nbsp;</p>
    <p id="nov4" class="nov">&nbsp;</p>
    <p id="nov5" class="nov">&nbsp;</p>
    <p id="nov6" class="nov">&nbsp;</p>
    </div>
    <style><!--
    .nov{position:absolute; z-index:1; width:1000px; height:563px; transition:all 1s linear;}
    #nov1{background:url('http://ekladata.com/X07KliZNL7FLX-sfm6Z5PQqstEY@1000x563.jpg'); clip-path:polygon(29px 349px, 161px 301px, 85px 503px, 85px 503px);}
    #nov2{background:url('http://ekladata.com/9-dhTb72h5F3aRd-TwmzAPLNmfY@1000x563.jpg'); clip-path:polygon(152px 0px, 387px 19px, 248px 140px, 248px 140px);}
    #nov3{background:url('http://ekladata.com/3QT-bbMnC9pao8fZ2RZWb32uTlw@1000x563.jpg'); clip-path:polygon(360px 325px, 540px 334px, 481px 487px, 481px 487px);}
    #nov4{background:url('http://ekladata.com/UZYp3q-w3bIPCUdSVgBZavJY5KY@1000x563.jpg'); clip-path:polygon(633px 165px, 794px 131px, 763px 346px, 763px 346px);}
    #nov5{background:url('http://ekladata.com/B4G_n5eI8Go5aMf2S2YjYgC5kkQ@1000x563.jpg'); clip-path:polygon(888px 331px, 1000px 324px, 1000px 464px, 1000px 464px);}
    #nov6{background:url('http://ekladata.com/97-r08XSFcB0GJxx0sdkm4L4pgw@1000x563.jpg'); clip-path:polygon(884px 16px, 1000px 7px, 1000px 147px, 1000px 147px);}
    #nov1:hover,#nov2:hover,#nov3:hover,#nov4:hover,#nov5:hover,#nov6:hover{z-index:5; clip-path:polygon(0px 0px, 1000px 0px, 1000px 563px, 0px 563px);}
    --></style>