• Clip 1

    Une première approche (pour moi !), de ce code qui semble maintenant accepté par les principaux navigateurs; après essais, pas si sûr !

    Il permet de ne conserver qu'une partie d'une image, comme le code background-selection mais avec d'autres formes que le rectangle.
    Un site qui vous donne le code en fonction de la forme choisie: ICI.

    Faisons d'abord un essai avec une zone rectangulaire, dont nous déterminons les dimensions et le positionnement par les paramètres dans le code: survolez ce cochon noir.

    Code

    <p id="cch"><img src="http://ekladata.com/tttVZ16PKh_QrafMOeKemSiebFQ/cochon.jpg" alt="" /></p>

    <style><!--
    #cch{transition:all 1s linear;width:800px; height:600px; float:left; position:absolute; clip: rect(0px, 600px, 800px, 250px);}
    #cch:hover{clip: rect(0px, 800px,600px, 0px);}
    --></style>
    ...
    ...


    Code

    <p id="ccho"><img src="http://ekladata.com/tttVZ16PKh_QrafMOeKemSiebFQ/cochon.jpg" alt="" /></p>
    <style><!--
    #ccho{transition:all 1s linear; width:800px; height:600px; float:left; position:absolute; -webkit-clip-path: polygon(55% 0%, 90% 50%, 55% 100%, 20% 50%);}
    #ccho:hover{-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    --></style>


    Code

    <p id="cchn"><img src="http://ekladata.com/tttVZ16PKh_QrafMOeKemSiebFQ/cochon.jpg" alt="" /></p>
    <style><!--
    #cchn{transition:all 1s linear; position:absolute; -webkit-clip-path:circle(250px at center);}
    #cchn:hover{-webkit-clip-path: circle(600px at center);}
    --></style>


    Code

    Il semble que le changement de forme au survol ne soit pas accepté avec transition ( triangle         -->rectangle)  ?
    <p id="cochon"><img src="http://ekladata.com/tttVZ16PKh_QrafMOeKemSiebFQ/cochon.jpg" alt="" /></p>
    <style><!--
    #cochon{transition:all 1s linear; position:absolute; -webkit-clip-path: polygon(60% 0%, 10% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
    #cochon:hover{-webkit-clip-path: polygon(0% 0%,100% 0%, 100% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,0% 100%);}
    --></style>


    Code

    Pour un polygone de ce genre, on peut conserver le même nombre de points mais les aligner selon notre choix.
    ...
    ...