だけ切り出し画像

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

ホバーだけで画像の表示部分に適用させる方法はありますの可視部分にCSSホバーを適用しますか？

Answer 1

私はそれを動作させるために見ることができるのは、ラッパー要素を追加してクリップをそれに適用し、ホバー状態を内部要素に適用することです。

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