如果鼠標在圖片上，如何獲得圖片上的文字？

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