如果鼠标在图片上,如何在图片上获取文字?
16lz
2021-01-22
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
0
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
更多相关文章
- 如何在离子框架中显示图像标题?
- 值得收藏的正则表达式(匹配中文字符、匹配双字节字符、匹配HTML标
- TextView显示html样式的文字
- 将图像从本地上传到tinyMCE
- 嵌入的图像在签名中不显示。
- 我似乎无法正确对齐这些图像
- 用JavaScript实现两种功能:1、切换全选/全不选文字;2、根据选中个
- 如何使用CSS精灵重复背景图像?
- 使用img src加载图像会在Mozilla / Chrome中产生不同的大小