JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

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

CSS

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  overflow: hidden;
}

.box {
  width: 300px;
  height: 220px;
  border-radius: 12px;
  position: relative;
  transform-style: preserve-3d;
  overflow: unset !important;
  transition: .3s;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(-1px);
  background: linear-gradient(123deg, #962eff, #0073e5, #007e94);
  background-clip: content-box !important;
  padding: 1px;
  filter: blur(0);
  opacity: 0;
  transition: filter .3s ease, opacity .3s ease;
}

.box:hover::before {
  filter: blur(15px);
  opacity: 1;
}

.inner {
  width: 100%;
  height: 100%;
  background: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgtumblr_ouw008HQkm1qeyvpto1_500.gif") center / cover;
  border-radius: 12px;
  z-index: 2;
  border: 2px solid #000;
  overflow: hidden;
}