html - 如果鼠标在图片上，如何在图片上获取文字？

Question

我希望当我的鼠标在图像上时，我的图片上的文字变得模糊，我已经模糊了现在我想在图片变得模糊的那一刻在图像上获得文字。这就是我现在所拥有的，但现在我不知道要在上面获取文本。我对此有点陌生，所以现在可能太高级了，但也许你们可以帮助我。

CSS:

.blur img {
          transition: all 1s ease;
}

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

html:

<div class="blur">
  <img src="picture.png" alt="picture">
  <h1>Welcome!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Aliquam ac varius arcu, sed luctus neque. 
   Nam varius sem vel nisi condimentum congue. 
</div>

Answer 1

考虑这个 DEMO

我用过这个css:

.blur img {
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}
.blur:hover .inner{
    opacity:1;
}
.blur{
    position:relative;
    width:100px;
}
.blur span{
    position:absolute;
    top: 100px;
    left: 50px;
    font-size:24px;
    opacity:0;
}