Bootstrap 3: sovrapposizione di testo sull'immagine

Question

Sto usando bootstrap 3 miniature come segue:

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

Voglio il caption di sovrapporre sull'immagine, ma il modo in cui sta facendo il Mashable.com

ho provato dopo ma senza fortuna: ((

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

Come posso sovrapporre un div caption sopra l'immagine, ma proprio come Mashable.com

01?

Questo funziona ma lo voglio centrato proprio come mashable. e centrato per ogni immagine. per alcune immagini, non è centrato.

Answer 1

È necessario impostare la classe di miniature per posizionare il contenuto post rispetto a quello assoluto.

Scegli questa fiddle

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

.thumbnail{ 
    position:relative; 

} 

Dandogli superiore e sinistro 0 farà apparire nell'angolo in alto a sinistra.

Answer 2

Impostare la posizione su assoluto; per spostare l'area didascalia nella posizione corretta

CSS

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

Bootply

Answer 3

E 'questo quello che stai dopo?

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

ho aggiunto: text-align:center al div e l'immagine

Answer 4

provare il seguente esempio. Sovrapposizione immagine con testo sull'immagine. demo

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