JSFiddle - React, Tailwind, and code Playground

HTML

<div class="testdiv">
  <a href="#"></a>
  <p> WM 2018 </p>
</div>

CSS

.testdiv {
  width: 320px;
  height: 150px;
  border: 1px solid black;
}

.testdiv a {
  width: 320px;
  height: 150px;
  background: url("https://www.hdsports.at/images/stories/Breitensport/Fussball/wm-2018-900.jpg");
  background-size: 320px 150px;
  display: block;
  filter: grayscale(0) blur(0);
    -webkit-transition: .3s linear;
	transition: .3s linear;
}

.testdiv a:hover {
  -webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}

.testdiv p {
  width: 320px;
  text-align: center;
  font-size: 40px;
  margin-top: -90px;
  position: relative;
  display: none;
}

.testdiv