Bootstrap 3: Text-Overlay auf das Bild

Question

I Bootstrap 3 thumbnail bin mit wie folgt:

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

ich die caption wollen auf das Bild zu überlagern, aber die Art und Weise auf Mashable.com

ich folgende habe versucht, getan, aber kein Glück: ((

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

Wie kann ich einen caption div oben auf Bild überlagert aber wie Mashable.com

01?

Das funktioniert, aber ich möchte es genau wie Mashable zentriert. und zentriert für jedes Bild. Für einige Bilder ist es nicht zentriert.

Answer 1

Sie müssen die Miniaturansichtsklasse relativ zum Post-Inhalt auf absolut festlegen.

prüfen diese fiddle

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

.thumbnail{ 
    position:relative; 

} 

Giving es oben und links 0 wird es in der linken oberen Ecke erscheinen.

Answer 2

Stellen Sie die Position auf absolut; Beschriftungsbereich in der richtigen Position zu bewegen

CSS

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

Bootply

Answer 3

Ist das, was nach der du bist?

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

Ich fügte hinzu: text-align:center zum div und Bild

Answer 4

das folgende Beispiel versuchen. Bildüberlagerung mit Text auf Bild. 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; 
}