Kreisrand mit Abstand auf Schwebeflug

Question

Dies wird einfacher mit einem Bild zu erklären, siehe hier, was ich erreichen möchte.

Wenn die Maus über die Box bewegt, würde Ich mag einen kreisförmigen Rand um das Graubild zeichnen. Das Bild hat sie hat ichduersiees wie so mit einem Clip-Pfad abgeschnitten:

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

Der Rest des Markup wie folgt:

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

Ich habe versucht, es selbst zu tun, indem Sie einen :hover Zustand die Zugabe Box, und dann Targeting der .image-wrap mit einigen padding: 5px; und border-radius: 50%; aber die Dinge gingen nicht so, wie ich es erwartet hatte.

Answer 1

Hallo hoffe, das tut, was Sie wollen. Ich habe pointer-events: none auf dem .image-wrap und pointer-events: auto auf dem img verwendet, um den Grenztrigger nur zu haben, wenn ich über dem img schwebe.

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

Vielleicht können diese Links helfen:

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