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

I want my picture to get blurry with text on it when my mouse is on the image, i got it blurry already now i want to get text on the image at the moment the picture is getting blurry. This is what i have now but now i dont have a idea to get text on it. I am kinda new to this so maybe its too advanced for now but maybe you guys can help me a bit with it.

当我的鼠标在图像上时,我希望我的图片上的文字变得模糊,我已经模糊了现在我想在图像变得模糊的时候在图像上获得文本。这就是我现在所拥有的,但现在我没有想法得到它的文字。我对此有点新意,所以也许它现在太先进了,但也许你们可以帮我一点点。

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>

3 个解决方案

#1

HTML:

<ul class="img-list">
<li>
<a href="http://nataliemac.com">
<img src="http://geekgirllife.com/images/filename.jpg" width="150" height="150" />
<span class="text-content"><span>Place Name</span></span>
</a>
</li>
...
</ul>

CSS:

ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

ul.img-list li {
display: inline-block;
height: 150px;
margin: 0 1em 1em 0;
position: relative;
width: 150px;
} 

span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
} 
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
} 

ul.img-list li:hover span.text-content {
opacity: 1;
}

Reference

#2

Consider this DEMO

考虑一下这个DEMO

I have used this css:

我用过这个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;
}

#3

I would recommend wrapping your h1 and p tags in a div just for schematics sake.

我建议将你的h1和p标签包装在一个div中,只是为了原理图。

Then you need to use position: absolute; on said div and position: relative; on the parent, if you don't understand that then please read up on positioning and how it interacts with the DOM's flow, however I have written a very simple use case for you below.

然后你需要使用position:absolute;上述div和position:relative;在父母身上,如果你不明白那么请阅读定位以及它如何与DOM的流程相互作用,但是我在下面为你写了一个非常简单的用例。

<div class="blur">
      <img src="picture.png" alt="picture">

      <div class="text">
          <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.
          </p>
      </div>
  </div>

.blur
{
position: relative;
}

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

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

.blur .text
{
display: none;
position: absolute;
top: 0px;
left: 0px;
}

.blur:hover .text
{
display: block;
}

#1