Apply CSS hovering only on the visible part of the cropped image

Question

.circle { -webkit-clip-path: circle(120px at center); clip-path: circle(120px at center); } .circle:hover { cursor:move; } 

 <img src="http://www.publicdomainpictures.net/pictures/10000/nahled/2185-1265776088aCTz.jpg" alt="" class=" circle"> 

Is there a way to aim only at the visible part of the image?

Answer 1

Only what I see to make it work is to add a shell element and apply a clip to it, and the hover state in the inner element.

 .wrapper { display:inline-block; -webkit-clip-path: circle(120px at center); clip-path: circle(120px at center); } .circle { display:block; } .circle:hover { cursor:move; } 

 <div class="wrapper"><img src="//placehold.it/300" alt="" class=" circle"></div>