文字叠加在图像悬停 - 响应 [英] Text Overlay on Image Hover - Responsive
本文介绍了文字叠加在图像悬停 - 响应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用本教程在我的图片上使用文字创建重叠式广告:
I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
它工作的很好,但我有一个自适应网站如果我尝试输入一个%作为'.box'的宽度/高度,图像消失。它似乎只能是固定的(即px),显然不缩放。
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
有没有任何想法?提前感谢!
Does anyone have any ideas? Thanks in advance!
推荐答案
.pic{
width:400px;
height:217px;
background: url(your image) no-repeat;
}
.text{
width:340px;
height:217px;
background:#FFF;
opacity:0;
}
.pic:hover .text
{
opacity:0.6;
text-align:justify;
color:#000000;
font-size:20px;
font-weight:700;
font-family:"Times New Roman", Times, serif;
padding:30px;
}
<div class="pic">
<div class="text">
Write your Text Here
</div>
</div>
完整来源:图片悬停上的文字重叠
乔治
这篇关于文字叠加在图像悬停 - 响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文