To help illustrate what I'm aiming for, here is a visual representation of what I want to achieve.
https://i.sstatic.net/WBqBx.jpg
Upon hovering over the box, my goal is to outline the gray image with a circular border. The image itself has been clipped using a path like this:
clip-path: circle(65px at center);
The accompanying markup is shown below:
<div class="artist-card">
<div class="image-wrap">
<img src="http://placehold.it/130x130" alt="artist name"/>
</div>
</div>
I attempted to achieve this effect by adding a :hover state to the box and then styling the .image-wrap with padding: 5px; and a border-radius: 50%;, but things did not turn out as expected.