Bootstrap 3 Text overlay on image

Question

I am using bootstrap 3 thumbnail as follows    lt div class  thumbnail  gt       lt img src   img robot jpg  alt         gt       lt div class  caption post-content  gt           lt h3 gt Robots  lt  h3 gt           lt p gt Lorem ipsum dolor sit amet lt  p gt        lt  div gt   lt  div gt    I want the caption to overlay on image but the way being done on Mashable com  I have tried following but no luck       post-content       background  none repeat scroll 0 0  FFFFFF      opacity  0 5      margin  -54px 20px 12px       position  relative      How can I overlay a caption div on top of the image but just like  Mashable com    This works but I want it centered just like Mashable  and centered for every image  for some images  it is not centered

User · Answer

Is this what you re after   http   jsfiddle net dCNXU 1   I added  text-align center to the div and image

User · Answer

You need to set the thumbnail class to position relative then the post-content to absolute    Check this fiddle    post-content       top 0      left 0      position  absolute      thumbnail      position relative       Giving it top and left 0 will make it appear in the top left corner

User · Answer

try the following example  Image overlay with text on image       demo    lt div class  thumbnail  gt     lt img src  https   s3 amazonaws com discount now staging uploads ed964a11-e089-4c61-b927-9623a3fe9dcb direct uploader 2F50cc1daf-465f-48f0-8417-b04ac68a999d 2FN 19 jewelry jpg  alt           gt     lt div class  caption post-content  gt       lt  div gt      lt div class  details  gt       lt h3 gt Robots  lt  h3 gt       lt p gt Lorem ipsum dolor sit amet lt  p gt        lt  div gt     lt  div gt    css   post-content       background  rgba 0  0  0  0 7  none repeat scroll 0 0      opacity  0 5      top 0      left 0      min-width  500px      min-height  500px       position  absolute      color   ffffff       thumbnail      position relative      details       position  absolute       z-index  2       top  0      color   ffffff

User · Answer

Set the position to absolute  to move the caption area in the correct position  CSS   post-content       background  none repeat scroll 0 0  FFFFFF      opacity  0 5      margin  -54px 20px 12px       position  absolute      Bootply

[html] Bootstrap 3: Text overlay on image

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3