文字叠加在图像悬停 - 响应 [英] 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屋！