How can I fit properly a background image with a blur in a card?

I'm a new beginner with CSS. I would like to make a card in which there is a little background inside with a blur.

However, I have seen that I must create a new div with only the image and its style bloc have to contain -webkit-filter: blur(8px);

But I'm not satisfied with this way because the background image does not properly fit inside the card and part of the blurred image overflows on the border of the card.

I'm not sure if my code can help, but here is a snippet :

.card {
  padding-top: 66.6%;
  border-radius: 0.8rem;
}

.bg-image {
  background-image: radial-gradient(rgba(230, 230, 230, 0.3), rgba(39, 39, 72, 0.2)), url("images/prototype.png");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  position: absolute;
  margin-top: -72.5%;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.toolsButton .card {
  background: transparent;
  cursor: pointer;
  transition: all 250ms ease;
  transform: scale(1);
  border: solid 3px #272748;
}

.toolsButton:hover .card {
  background: transparent;
  transition: all 250ms ease;
  transform: scale(1.05);
  border: solid 3px #272748;
}

.toolsButton:active .card {
  background: transparent;
  transition: all 150ms ease;
  transform: scale(1.1);
  border: solid 3px #272748;
}

<div class="row justify-content-around">
  <div class="col-9 col-xl-5 col-md-5 text-center toolsButton">
    <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
      <div class="card">
        <div class="card-body pt-3 row justify-content-center" style="height:fit-content;">
          <div class="bg-image"></div>
          <div class="col">
            <span><?php echo $content; ?></span>
          </div>
        </div>
        <input type="SUBMIT" name="app" value="<?php echo $content; ?>" style="opacity: 0">
      </div>
    </form>
  </div>

Thanks in advance!

Solution

You can scale the blurred image so it becomes a bit larger. If you change the position as well, then the blurred edges could be outside of the parent element. You can then add overflow: hidden; in CSS on the .card-body element to hide the overflowing parts.

That overflow: hidden will hide all of the parts that would go out of the container. In that way the blurry edges will never be visible and your effect should work.