CODEWITHSUNDEEP
css
curious1
curious1

Reputation: 14717

How to position image caption over and within a responsive image?

I have the following html:

<div class="media">
  <img src="/img/sample.jpg">
  <div class="caption">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
  </div>
</div>

The size of the image will shrink/grow with the size change of the browser. The caption should be positioned over the image and within the boundary of the image. The width of the caption must change when the image size changes.

The image is large enough to hold the text. The image size is not known in advance. The image must retain original width when the browser's viewport width is larger than the image's actual width. I hope the caption is positioned at the bottom of the image.

If there is any css solution, that will be fantastic.

Thanks for any input!

Upvotes: 2

Views: 2247

Answers (2)

bjb568
bjb568

Reputation: 11498

http://jsfiddle.net/P92Fs/7/

.media {
    position: relative;
    display: inline-block;
}
.media .caption {
    position: absolute;
    bottom: 0;
    text-align: left;
}
img {
    width: 100%;
}

Upvotes: 1

Cam
Cam

Reputation: 1902

Try this it should work perfectly. http://jsfiddle.net/cornelas/ygL64/

img {
 width: 100%;
 height: 100%;
 background: #ccc;
 position: relative;    
}
.caption {
 position: absolute;
 top: 25%;
 left: 50%;
 width: 200px;
 background: rgba(255,255,255,0.2);
}

Upvotes: 2

Related Questions