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

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

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

Answer 2

考虑这个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; 
} 

Answer 3

我会建议你包裹h1和p标签为div只是为了原理图。

然后，你需要在上述父div和position: relative;使用position: absolute;，如果你不明白，那么please read up on positioning and how it interacts with the DOM's flow，但是我在下面写了一个非常简单的用例为您服务。

<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; 
}