how to make an overlay over a bootstrap thumbnail?

Question

I'm using twitter bootstrap 2.1.1 with a responsive layout and I'd like to float a label in the bottom right hand corner of the image. One of the problems i'm having is because it's responsive when the thumbnail is wider then the image it floats too far. The other issue is I can't seem to get it to float to the right. I should also add that although I want it in the right hand bottom corner I do want it offset by a few pixels to it isn't right on the edge of the image. Also the text might always be photo missing, that is just when a default image is shown.

Here is my html so far

<li class="span4">
  <div class="photo-group thumbnail">
    <a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper"> 
      <img alt="300x200&amp;text=photo" src="http://www.placehold.it/300x200&amp;text=Photo">
      <span class="label label-inverse photo-label">Photo Missing</span>
    </a>
    <div class="caption">
      <div class="pull-right">
        by <a href="/users/50494983aa113ebd5c000001">
     hadees
        </a>
      </div>
      <a href="/recipes/50500235aa113eb1870001d8">Chocolate Crackle Cookies</a>
    </div>
  </div>
</li>

and here is my css

.content-header {
    padding-bottom: 10px;
}

.thumbnail > a > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.photo-group .photo-wrapper {
  position: relative;
}

.photo-group .photo-wrapper .photo-label {
  position: absolute;      
  bottom: 0;
}

.photo-group .photo-wrapper .photo-label {
  float: right;
}​

I've also got a jsfiddle for a better example.

Maybe the right way to handle this is to just make the photogroup's max width 300 but I think that kind of looks funny on a desktop full screen.

Answer 1

Here's my version of the fiddle: http://jsfiddle.net/AdVCT/9/

Essentially, you need to put a wrapper around both the image and the label, so that you can absolutely position the label within this wrapper:

        <div class="photo">
            <img alt="..." src="..." />

            <span class="label label-inverse photo-label">Photo Missing</span>
        </div>

And then with some CSS, you can alter the .photo to be centered but also only as large as the image inside it (the caption is absolutely positioned, so it is effectively taken out of the page flow and doesn't affect width of parents etc.):

.photo-group .photo-wrapper .photo {
    position: relative;
    margin: 0 auto;
    display: table;
}

And remove margin-left: auto/margin-right: auto from the .thumbnail > a > img rule. Finally, to offset the label slightly from the sides of the image, use:

.photo-group .photo-wrapper .photo-label {
  position: absolute;      
  bottom: 5px;
  right: 5px;
}

And set 5px to whatever you want the offsets to be.