-
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> </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>