Bootstrap 3: Наложение текста на изображение

Я использую миниатюру bootstrap 3 следующим образом:

        <div class="thumbnail">
            <img src="/img/robot.jpg" alt="..." />
            <div class="caption post-content">

                <h3>Robots!</h3>
                <p>Lorem ipsum dolor sit amet</p> 

            </div>
        </div>

Я хочу, чтобы caption накладывался на изображение, но способ выполнялся на Mashable.com

Я пробовал следовать, но не повезло: ((

.post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    margin: -54px 20px 12px; 
    position: relative;
}

Как я могу наложить div caption поверх изображения, но точно так же, как Mashable.com?

Это работает, но я хочу, чтобы он был центрирован точно так же, как mashable. и центрируется для каждого изображения. для некоторых изображений он не центрирован.

Ответ 1

Вам нужно установить класс миниатюр для размещения относительного, а затем пост-содержимого в абсолютный.

Отметьте fiddle

.post-content {
    top:0;
    left:0;
    position: absolute;
}

.thumbnail{
    position:relative;

}

Давая ему верх и левое 0, он появится в левом верхнем углу.

Ответ 2

Это то, что вам нужно?

http://jsfiddle.net/dCNXU/1/

Я добавил: text-align:center в div и изображение

Ответ 3

Установите положение в абсолютное; для перемещения области заголовка в правильном положении

CSS

.post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    margin: -54px 20px 12px; 
    position: absolute;
}

Bootply

Ответ 4

попробуйте следующий пример. Наложение изображений с текстом на изображение. демо

<div class="thumbnail">
  <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="..."   />
  <div class="caption post-content">  
  </div> 
  <div class="details">
    <h3>Robots!</h3>
    <p>Lorem ipsum dolor sit amet</p>   
  </div>  
</div>

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; 
}