How to implement smooth selection of an object in an image?

Question

css

There are pictures of people. When you hover over a person, it is highlighted with a stroke, everything else is muted a little. I did it in an ugly way, but nothing else came to mind and I did not find it. The implementation is like this, I inserted 2 svg into the layout. The first category is images and their strokes, the second #mask is 1 svg for everything. To highlight the stroke, I just add color to it on hover. But in order to create a dim background on the entire image, except for the person who was hovered over, I use a mask. I take the outline, insert it into the second svg #mask and thus get the selected area by mask. (svg has to be updated after inserting the rim $('#mask').html($('#mask').html()))
At this stage, I can only make a smooth stroke, but with a mask of a problem, it either exists or it does not, i.e. abrupt transitions. It needs to be smoothed out somehow. What can be done in this case, or maybe there are some other solutions?
Page