JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myImg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/60/Earth_from_Space.jpg" width=200 height=200>
  <span>Die Erde</span>
</div>

CSS

.myImg {
  position: relative;
  display: inline-block;
}
.myImg > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  visibility: hidden;
}
.myImg:hover > img {
  filter: blur(4px);
}
.myImg:hover > span {
  visibility: visible;
}