HTML Add text over div class thumbnail in bootstrap

Question

I have seen some similar questioned posed here but none of the solutions posted did anything for me. (I tried making the image a background as suggested at how to display text over an image in Bootstrap 3.1, but that did not appear to work)

I am trying to get text over an image using Twitter's Bootstrap.

I am utilizing the thumbnail class, as it auto resizes the image to fit a column. However, I can't find a satisfactory way to add centered text to the image.

Here is a screenshot of the page as-is: https://i.stack.imgur.com/GR9uQ.jpg

Here is the snippet of code concerned:

<div class="menuphotos">
<div class="container">
    <h2> Lorem Ipsum</h2>
        <p>Bal Bla Bla Bla </p>
        <div class="row">
            <div class="col-md-4">
                  <div class="thumbnail">
                    <a href="#"><img src="http://imgur.com/4uEiK33.jpg"></a>
                     <div class="h2 strong">Geology and Geophysics</div>
                     <p> Bla Bla Bla</p>
                </div>
            </div>

            <div class="col-md-4">
                 <div class="thumbnail">
                    <a href="#"><img src="http://imgur.com/U5IO8eV.jpg"></a>
                    <div class="h2 strong">Astronomy</div>
                <p> Bla Bla Bla</p>
                </div>
            </div>

            <div class="col-md-4">
                 <div class="thumbnail">
                    <a href="#"><img src="http://imgur.com/OZ5C3Wy.jpg"></a>
                   <div class="h2 strong">Etc</div>
                   <p> Bla Bla Bla</p>
                </div>                
            </div>
        </div>
    </h2>
</div>

and

.menuphotos{
background-color: #efefef;
border-bottom: 1px solid #dbdbdb
}

.menuphotos h2 {
    color: #393c3d;
    font-size: 24px;
}

.menuphotos p {
    font-size: 15px;
    margin-bottom: 13px;
}

The entirety of my code is here: http://pastebin.com/ghYwGPg1 (HTML) and here: http://pastebin.com/EgjywRr9 (CSS)

If it is not possible to add text centered on top of this image with the thumbnail class. What other way can I get an image to auto resize to fit the column. The images being used all all different sizes, but the same aspect ratio (2:3)

Sorry - I've been distracted with other work and have not gotten a chance to try yet! I promise to let you know when I do! The demo you linked is great! Anyway to get rid of the red lines on top/bottom of the text? — Brian C, Apr 05 '15 at 07:38

score 0 · Answer 1 · answered Mar 22 '15 at 03:09

You could add a class onto the thumbnail that would make the position relative, then you could absolute position the text in a div, so that it is layered over the top of the image.

Something like this:

<div class="thumbnail rel-pos">
  <a href="#"><img src="http://imgur.com/U5IO8eV.jpg"></a>
  <div class="over-text">
   <h2>Astronomy</h2>
   <p> Bla Bla Bla</p>
  </div>
</div>

.rel-pos {
  position: relative;
}

.over-text {
  width: 100%;
  position: absolute;
  top: 300px;
  text-align: center;
  z-index: 10;
}

HTML Add text over div class thumbnail in bootstrap

1 Answers1