• Decoupe 2

    En utilisant toujours l'attribut clip-path, nous pouvons modifier la découpe en un cercle, par exemple.

    clip-path: circle(30%);

    Vous pourrez aussi positionnner le cercle découpé par: clip-path:circle(40% at 10% 20%);

    <p><img id="anes5" src="http://ekladata.com/OAaIlmkzcwDOHCPVq6j3FvPLHN0.jpg" alt="" /></p>
    <style><!--
    #anes5{position:relative; width:1600px; height:900px; margin:30px auto; clip-path:circle(30%);}
    --></style>

    La sélection est centrée dans l'image de base.

    Voyons pour faire une sélection positionnée sur une partie particulière de l'image.


    <p><img id="anes6" src="http://ekladata.com/OAaIlmkzcwDOHCPVq6j3FvPLHN0.jpg" alt="" /></p>
    <style><!--
    #anes5{position:relative; width:1600px; height:900px; margin:30px auto; clip-path:circle(30%);}
    #anes6{position:relative; width:1600px; height:900px; margin:30px auto; clip-path:circle(10% at 60% 60%);}
    --></style>

    Avec toujours la possibilité d'ajouter une animation au survol:

    <p><img id="anes7" src="http://ekladata.com/OAaIlmkzcwDOHCPVq6j3FvPLHN0.jpg" alt="" /></p>
    <p>&nbsp;</p>
    <style><!--
    #anes7{position:relative; width:1600px; height:900px; margin:30px auto; clip-path:circle(10% at 60% 60%); filter:hue-rotate(90deg); transition:all 1s;}
    #anes7:hover{clip-path:circle(100% at 50% 50%); filter:hue-rotate(0deg);}
    --></style>