texto sobre imagem em slider do bootstrap

[monteirof7 1]

Olá pessoal,

 

Gostaria de colocar um texto sobre uma imagem, estou desenvolvendo um site em bootstrap e estou utilizando um slider responsivo. Com o seguinte codigo:

 <div class="carousel-inner">
         <div class="item active">
                            <img class="img-responsive" src="http://placehold.it/750x500" alt="">
                            <p>QUERO ESSE TEXTO SOBRE ESSA IMAGEM DE CIMA</p>
         </div>
         <div class="item">
                            <img class="img-responsive" src="http://placehold.it/750x500" alt="">
         </div>
         <div class="item">
                            <img class="img-responsive" src="http://placehold.it/750x500" alt="">
         </div>
</div>

Já tentei por um posiion absolute no texto, porém quando faço isso ele some. E não é possivel utilizar a imagem como um background-image.

 

 

Obrigaod

[Emet 6]

Use o recurso de optional captions do próprio bootstrap.

 

Documentação: http://getbootstrap.com/javascript/#carousel

 

Acrescente esse código dentro da div que deseja que o texto sobreponha a imagem abaixo da imagem:

<div class="item">
    <img src="..." alt="...">
    <div class="carousel-caption">
        <h3>Seu texto aqui</h3>
        <p>Seu texto aqui</p>
    </div>
</div>

OBS: Não necessariamente precisa ser um H3 e um P, é só um exemplo.

 

Funcionando com seu código: http://jsbin.com/libuxodetu/1/edit

 

Exemplo completo com os controles: http://jsbin.com/vuxoxerage/1/edit

[monteirof7 1]

Olá Ernet!

 

Acabei de ver esse recurso no site, não tinha percebido antes, mas mesmo assim obrigado pela resposta!

 

Outra dúvida sobre esse caroussel que não estou conseguindo entender é como mudar o height e width dele, nao encontro no site, se vc ou outra pessoa puder me ajudar, agradeço!

[Emet 6]

Diretamente pela classe, basta sobrescreve-la:

.carousel-inner {
  width: 400px; /* Largura */
  height: 300px; /* Altura */
}

Todo elemento do bootstrap possui um estilo padrão, basta altera-ló usando próprias suas classes.

 

Exemplo usando seu código: http://jsbin.com/zorilisare/1/edit

[monteirof7 1]

Mas quando simplesmente delimito um valor height diferente para ele, ele corta a parte de baixo, ao inves de redimensiona-las. Por exemplo, supondo que a altura seja 700px, se eu mudo ela pra 400px os 300px de baixo somem ao inves de subir e "comprimir" a imagem. Mas isso nao é só na imagem nao, usando o carousel-caption, se o texto estiver nos 300px inferiores ele some tb.

 

Obrigado pela sua resposta

Consegui entender.

 

Esse carousel se adapta ao tamnho da imagem, entao se eu tiver uma imagem de 100px height ele terá 100px heigth, se eu mudar o tamnho dele para 50px height, ele simplesmente cortara a metade da imagem.

 

O problema é colocar imagens com tamanhos diferentes nele, mas com um bom editor ta tudo certo

[Emet 6]

Exato, aqui um exemplo que eu fiz mas que se adapta:

 

JSBIN: http://jsbin.com/qoferitate/1/edit

[Fernando Soares Souza 0]

Olá, tudo bem?

 

Eu também não consegui entender como aumentar a largura de uma imagem sem fazer que altere a posição dela, pois no meu caso da de notar pq tem o caption no centro da imagem, eu fiz: 

Mas imagem reposiciona cerca de 15% fora do centro que estava anteriormente, precisava mudar o tamanho do meu carousel porque ele não está em tamanho não muito legal em tamanhos de tela menores.

 

Espero que consigam entender, obrigado!

 

.carousel-inner {
  width: 400px; /* Largura */
  height: 300px; /* Altura */
}