图像悬停时的文本叠加 - 响应式

Text Overlay on Image Hover - Responsive

本文关键字：响应 叠加 文本 悬停 图像      更新时间：2023-09-26

我正在使用本教程在我的图像上创建一个带有文本的叠加层：

http://codepen.io/pdelsignore/pen/uqenH

它工作得很好，但是我有一个响应式网站，如果我尝试输入%作为".box"的宽度/高度，图像就会消失。看来它只能是固定的（即px），显然无法缩放。

.box {  
cursor: pointer;  
height: 250px;   
position: relative;  
overflow: hidden;  
width: 400px;
font-family: 'Open Sans', sans-serif;
}

有人有什么想法吗？提前感谢！

尝试min-width并尝试min-height。

min-width: 100%;
min-height: 100%;

在实时项目中，我们通常使用任何响应式框架。比如引导或基础。所以我认为你可以忽略，因为框架会正确处理这个问题。无需使用任何 % 来使其响应。对于引导程序，我们使用

 <div class="row">
    <div class="col-md-4">
        <div class="box">  
            <img src="http://files.room1design.com/oldcity.jpg"/>  
            <div class="overbox">
                <div class="title overtext">
                    Walk This Way
                </div>
                <div class="tagline overtext">
                    Follow the path of stone, a road towards an ancient past
                </div>
            </div>
        </div>  <!-- End box -->
    </div>  <!-- End Col-4 -->
 </div>  <!-- End row -->

我相信 .box 的尺寸百分比将基于父级的高度。 由于主体上没有指定高度，因此没有参考系。 尝试添加以下内容以获取在 .box 上工作的百分比。

html, body {
    height:100%;
}

这是一个更新的代码笔，其中包含一些其他更改，以说明在赋予身体尺寸后使用百分比。

http://codepen.io/anon/pen/dPREBE

相关文章：