Как реализовать плавное выделение объекта на изображении?

Имеются изображения на котором запечатлены люди. При наведении на человека он выделяется обводкой остальное все немного приглушается. Сделал по уродски, но другое ничего не пришло в голову и не нашел. Реализация такая, в верстку вставил 2 svg. Первая категория - это изображения и их обводки, второе #mask - это 1 svg на все. Что бы подсвечивать обводку я просто добавляю цвет её при ховере. Но что бы создать тусклый фон на всем изображении исключая человека на которого навели я использую маску. Беру контур, вставляю его во второе svg #mask и таким образом получаю по маске выделенную область. (svg приходится обновлять после вставки ободки $('#mask').html($('#mask').html()))

На данном этапе я могу только сделать плавную обводку, а вот с маской проблемы, она или есть или ее нет, т.е. резкие переходы. Нужно как то сгладить. Что можно сделать в данном случае, или может есть какие то другие пути решения?

Страница