Как я могу размыть изображение в определенном месте? ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект, при котором при наведении курсора на изображение та часть изображения, где находится курсор, становится размытой.
Я пробовал несколько методов. эта проблема, например, использование SVG (код того, что я сейчас пытаюсь сделать, приведен ниже), а также просто обычный div с фильтром размытия фона. Однако все они приводят к одной и той же проблеме: граница элемента размытия становится резкой, поэтому в конечном итоге он выглядит так, как показано на изображении. Вместо этого я хочу, чтобы эффект размытия выглядел так, будто он медленно сливается с изображением. Как мне добиться такого эффекта? Кроме того, я новичок в веб-разработке, поэтому был бы признателен за ответы, которые объясняют все поэтапно. Большое спасибо







Blurred Circle Effect


.container {
position: relative;
width: 100%;
height: 100vh;
background-image: url('https://via.placeholder.com/400');
background-size: cover;
}

.container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-size: inherit;
filter: blur(10px);
clip-path: circle(20% at center); /* Adjust the circle size */
pointer-events: none; /* Prevent interaction with the pseudo-element */
}









Подробнее здесь: https://stackoverflow.com/questions/793 ... cific-spot