2
respostas

Texto + Imagem

Pessoal, como faço para colocar texto em cima da imagem no HTML e CSS, sem colocar a imagem como background?! Poderiam me ajudar?!

Desde já agradeço.

2 respostas

Olá Edith, tudo bom?

Para conseguir manipular o texto você precisa que os dois estejam no mesmo container, no caso uma div por exemplo.

<div class="container">
    <img
        src="https://img.estadao.com.br/thumbs/640/resources/jpg/6/2/1580416980826.jpg"
    />
    <p>MeooW</p>
</div>

Depois disso, pelo CSS você vai configurar as propriedades position e display para que você consiga movimentar o texto livremente através da imagem que será feita com as propriedades top, left, right e bottom.

.container {
  display: inline-block;
  position: relative;
}
.container p {
  position: absolute;
  top: 145px;
  right: 20px;
  font-size: 40px;
  color: white;
}

Pronto! após isso você pode deixar da forma como preferir.

Obs: O exemplo que peguei foi do stackoverflow e apenas fiz algumas adaptações. Se quiser ver o modelo original Segue o link!

Espero ter ajudado ^^.

Muito, mais muito obrigada mesmo .... Vou inserir no meu projeto