CSS Border transition on hover leave

I'm trying to create an animation effect on a div where a border and drop shadow makes the div look 3d on hover and then slowly fades/disappears when the cursor leaves.

As you can see there is no border disappear transition for the first 1 example (my code) while there is for the second (what I want). It's a slight animation but it's there.

How do I replicate the border disappear animation?

So far I've gotten the animation to play when hover but I'm not sure how I'd go about animating the border disappear, I'm assuming I need to use onmouseleave and some transition.

CSS transition on border-width that plays on blog-post:hover

However I'm not sure how to get a transition onmouseleave like shown in the gif.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.blog-post {
  border-radius: 25px;
  height: fit-content;
  transition-property: border-width;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .2s;
  display: block;
}

.blog-post:hover {
  border-radius: 25px;
  border-image: none;
  border-style: none none solid solid;
  border-width: medium medium 8px 6px;
  border-color: #1D89E7;
  filter: drop-shadow(0px 2px 2px #000);
  background: #f0f6fb;
}

.blog-img {
  padding: 30px;
  border-radius: 25px;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="bg-white blog-post shadow-lg rounded-lg max-w-sm mb-5">
  <a href="#">
    <img class="img-responsive blog-img" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
  </a>
  <div class="pl-5 pr-5 pb-3 mt-2">
    <a href="#">
      <h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
    </a>
    <p class="text-muted blog-date-text">June 6, 2023</p>

  </div>
</div>

<!-- end snippet -->

I would consider box-shadow combined with translation:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.box {
  width: 200px;
  height: 200px;
  margin:10px;
  border-radius: 25px;
  background: #ccc;
  box-shadow: 0 0 blue;
  transition: .4s linear;
  cursor: pointer;
}
.box:hover {
  box-shadow: -8px 8px blue;
  transform: translate(8px, -8px);
}

<!-- language: lang-html -->

<div class="box"></div>

<!-- end snippet -->