Nehmen CSS-Hover nur auf sichtbaren Teil eines abgeschnittenes Bildes

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

Gibt es eine Möglichkeit schweben haben, nur auf dem sichtbaren Teil des Bildes anwenden?

Answer 1

Nur was ich sehen kann, um es zum Laufen zu bringen, ist, ein Wrapper-Element hinzuzufügen und den Clip darauf anzuwenden, aber den Hover-Zustand auf das innere 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>