Bootstrap 3 CSS Didascalia sovrapposizione

Question

Io uso bootstrap e di avere un problema di sovrapporre didascalia su un'immagine, il div titolo proprio non riesco a inserirsi all'interno della scatola, come illustrato di seguito:

HTML:

<div class="col-sm-4"> 
    <a href="#"> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div> 
    </a> 
</div> 

<div class="col-sm-4"> 
    <a href="#"> 
     <img src="images/upload/projects/21/cake.png" class="img-responsive" alt=""> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div> 
    </a> 
</div> 

CSS:

div.desc{ 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    background-color: #000; 
    color: #fff; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

SOLUZIONE:

Grazie @himanshu per risolvere il problema.

div.desc{ 
    background-color: #000; 
    bottom: 0; 
    color: #fff; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    width: 100%; 
} 

.fix{ 
    width: 100%; 
    padding: 0px; 
} 

Answer 1

penso problema è nel posizionamento piuttosto che di sovrapposizione, div.desc è assoluta e l'immagine è suo fratello. Quindi l'overlay non seguirà l'immagine seguirà solo il tag di ancoraggio o il tuo div.wrapper.

Da quello che posso vedere è che c'è un margine sull'immagine o il riempimento in ancora o nel wrapper.

La soluzione migliore è inserire desc e l'immagine in un altro div con larghezza 100% con riempimento 0.

<div class="col-sm-4 wrapper"> 
    <a href="#"> 
<div class="fix"> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div></div> 
    </a> 
</div> 

CSS:

.fix{width:100%; padding:0px;} 

Answer 2

Utilizzare questo gli attributi per la classe div.desc

div.desc{ 
    position: absolute; 
    bottom: 0; 
    background-color: #000; 
    color: #fff; 
    opacity: 0.5; 
    left:0; /** new **/ 
    right:0; /** new **/ 
    filter: alpha(opacity=50); 
} 

Answer 3

Prova questa

<div class="wrapper"> 
    <div class=""> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" > 
    </div> 
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div> 
</div> 
<div class="wrapper"> 
    <div class=""> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" > 
    </div> 
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div> 
</div> 

css

div.desc_content { 
background-color: #000; 
color: #FFF; 
font: bold 11px verdana; 
padding-left: 10px; 
padding-top: 7px; 
height: 23px; opacity: 0.7; 
position: relative; 
top: -30px; 
} 
div.wrapper{ 
    float: left; 
    position: relative; 
    margin: 10px; 
} 

Answer 4

Per gli altri cercando di sovrapporre una didascalia su un'immagine in Bootstrap, è consigliabile utilizzare le didascalie carosello .

Vedi qui: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

<div class="carousel-caption"> 
    <h3>Chania</h3> 
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
    </div>