Applicare hover CSS solo sulla parte visibile di un'immagine ritagliata

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

C'è un modo per avere hover solo applicare sulla parte visibile dell'immagine?

Answer 1

Solo ciò che posso vedere per farlo funzionare è aggiungere un elemento wrapper e applicare la clip a quello, ma lo stato di passaggio del mouse sull'elemento interno.

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