如果鼠标在图片上，如何在图片上得到文本？
如果鼠标在图片上，如何在图片上得到文本？
提问于 2015-02-11 11:44:16
当我的鼠标在图像上的时候，我想让我的图片变得模糊，当我的鼠标在图像上的时候，我已经模糊了，现在我想在图片变得模糊的时候在图像上得到文本。这是我现在拥有的，但现在我没有什么想法去获取它的文本。我对这件事有点陌生，也许现在它太先进了，但也许你们可以帮我一把。
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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-02-11 11:58:56
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;
}参考文献
Stack Overflow用户
发布于 2015-02-11 11:53:47
考虑一下这个演示
我使用了这个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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28453540
复制相关文章
相似问题
腾讯云开发者
