JSFiddle - React, Tailwind, and code Playground

HTML

<a class="image" href="">
  <img src="https://placehold.it/300x100" alt="">
  <p>WM 2018</p>
</a>

CSS

.image {
  position:relative;
  display:inline-block;
}

.image:hover img {
  filter: blur(5px);
}

.image:hover p {
  opacity:1;
  visibility:visible;
}

img {
  transition: all 1s;
}

p {
  transition: all 1s;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  left:50%;
  margin:0;
  visibility:hidden;
  opacity:0;
}