JSFiddle - React, Tailwind, and code Playground

HTML

<div class="man bg-img">
    <p>Lorem ipsumsdf gsdf gsdfg sdfgsd fgsd fgsdfg sdfgs dfgsdfg sdfg sdfg sdfgs dfgs df</p>
    <a href="#" class="category-link">text</a>
</div>

CSS

.man{
  width:400px;
  height:400px;
  position:relative;
}
.man:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background-image:url("https://pbs.twimg.com/profile_images/427531259770703872/E01dTaRl_400x400.jpeg");
  opacity:1;
  transition:opacity .5s;
}
.man:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-2;
  background-image:url("https://pbs.twimg.com/profile_images/427531259770703872/E01dTaRl_400x400.jpeg");
  -webkit-filter:blur(5px);
  filter:blur(5px);
}
.man:hover:before{
 opacity:0;
}