圓形邊框與間距懸停

Question

這將更容易解釋一張圖片，看到這裏是我想實現的。

當鼠標懸停在箱子，我想提請各地的灰度圖像的圓形邊框。該形象本身已被剪切帶夾路徑，如下所示：

clip-path: circle(65px at center); 

標記的其餘部分如下：

<div class="artist-card"> 
    <div class="image-wrap"> 
    <img src="http://placehold.it/130x130" alt="artist name"/> 
    </div> 
</div> 

我試圖通過添加:hover條件的做我自己框，然後針對.image-wrap與一些padding: 5px;和border-radius: 50%;但事情並沒有如我所料。

Answer 1

嗨希望這你想要做什麼。我在.image-wrap和pointer-events: auto的img上使用pointer-events: none只有在懸停在img上時纔有邊界觸發器。

img { 
 
    margin: auto; 
 
    display: block; 
 
    clip-path: circle(65px at center); 
 
    pointer-events: none; 
 
} 
 

 
.image-wrap { 
 
    display: flex; 
 
    align-items:center; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    pointer-events: none; 
 
} 
 

 
.artist-card { 
 
    pointer-events: auto; 
 
    background: grey; 
 
    width: 155px; 
 
    height: 155px; 
 
} 
 

 
.image-wrap:hover { 
 
    border-color: yellow; 
 
} 
 

 
.artist-card:hover .image-wrap { 
 
    border-color: yellow; 
 
}

<div class="artist-card"> 
 
    <div class="image-wrap"> 
 
    <img src="http://placehold.it/130x130" alt="artist name"/> 
 
    </div> 
 
</div>

Answer 2

或許這些鏈接可以幫助：

https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

http://gudh.github.io/ihover/dist/

CSS create border on hover arround filled circle with empty space between circle and border