Text overlay on image

[♥Tsimi]

I am stuck on some issue here which is normally no problem to solve but if it has to be responsive then.... :wacko:

the following layout.

<div class="row">
   <div class="col-sm-4">
    IMAGE HERE
   </div>
   <div class="col-sm-8">
    <div class="wrapper">
     IMAGE HERE
       <div class="overlay">
            <h2>TITLE TEXT</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>*Lorem ipsum dolor sit amet!</p>
        </div>
     </div>
   </div>
</div>

and this is the css I am using

 

.wrapper {
    display: inline-block;
    position: relative;
}

.wrapper .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    color: #FFF;
    text-align: center;

 

I can see the text and all but when i resize the page with firefox (ctrl+shift+m) the image won't resize and the text also won't adjust.

So it cannot be used in md,sm and xs view mode.

 

Is there any other approach to add text over images in Bootstrap? except on carousel and thumbnails.

 

EDIT:

 

 

the image won't resize

 

i just solved this by adding img-responsive to the wrapper class

 

text still won't adjust to the image size...

[Bob Terveuren]

Hi - try adding img_resposive to the <img> as well as the wrapper

<div class="row">
   <div class="col-sm-4">
    <img src="img/test.png" class="img-responsive" >
   </div>
   <div class="col-sm-8">
    <div class="wrapper img-responsive">"
     <img src="img/test.png" class="img-responsive" >
       <div class="overlay">
            <h2>TITLE TEXT</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>*Lorem ipsum dolor sit amet!</p>
        </div>
     </div>
   </div>
</div>

[♥Tsimi]

Thank you for your help Bob.

I did add img-responsive to the wrapper and if I am not mistaken, the tep_image function should already include img-responsive too right?

Anyway the image is resizing now but the text over it won't resize/adjust together with the image.

[♥Tsimi]

Thanks Henry. I'll give it a try.