How can I blur an image in a specific spot?

I am trying to make an effect where, when I hover over an image, that part of the image where my cursor is becomes blurred.

I’ve tried multiple methods to approach this problem, such as using SVGs (Code for what I’m currently trying is provided below), as well as just a normal div with a blur backdrop-filter. However, they all lead to the same problem in which the border of the blurring element is sharp, so it ends up looking like the image provided. Instead, I want the blur effect to look like it slowly merges into the image. How can I achieve that effect? Also, I am a beginner at web development, so I would appreciate answers which explain everything in baby steps. Thanks a lotThe output of previously tried solutions

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blurred Circle Effect</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .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 */
}

  </style>
</head>
<body>

  <div class="container"></div>

</body>
</html>