Bootstrap and text on the reactive image

advertisements

I am trying to accomplish something like this:

As I am using Bootstrap, for now I have this:

<div class="col-md-3">
        <div class="test">
            <%= (image_tag("http://example.com.image.jpg", :class => "img-responsive")) %>
            <h2>hello</h2>
        </div>
    </div>
</div>

CSS:

.test {
   position: relative;

   h2 {
   background-color: #bebebe;
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
  }
}

This works well for big and medium screens but the problem is on smaller screens. After all elements stack to one column the problem appears with smaller images. On bigger screens where there are multiple elements in one row there is no problem, text appears on the bottom of the image. The problem is that some images are not big enough on smaller screens as they need to have width 100% of the screen and they are only 300-400ox wide. Because of that they don't use 100% of the screen, but header does use it.

It looks something like this:

     **********************************
     *                                *
     *                                *
     *            Image               *
     *                                *
     *                                *
********************************************
*                Header                    *
********************************************

So, header spreads all the way to the left and right of the screen and jumps outside of the image. How to keep header inside of the image no matter of screen size?

Thank you!


Try this:

Demo : http://jsfiddle.net/lotusgodkk/bm3mjhm1/

CSS:

.test {
    position: relative;
    display:inline-block; //Add display:inline-block; if it doesn't affect your code.
}
img {
    max-width:100%;
}
h2 {
    background-color: #bebebe;
    position: absolute;
    bottom: 0;
    left: 0;
    right:0; // Remove width:100% and add left,right offset.
}

HTML:

<div class="test">
    <img src="http://lorempixel.com/400/200/sports/1/" />
     <h2>Sample TExt. Sample TExt</h2>
</div>

Check the demo for different sizes of image.