图像悬停时的文字叠加-自适应

Question

I am using this tutorial to create an overlay on my images with text:

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

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 (ie 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!

Answer 1

Try giving min-width and min-height a try.

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

Answer 2

In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use

 <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 -->

Answer 3

I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.

html, body {
    height:100%;
}

here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.

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