2

Utilizando o pseudoelemento :after, criei uma legenda para imagem. Como posso fazer para que a legenda fique em cima da imagem e não embaixo?

.estrutura{
  width:10%;
  height:30%;
  }

.estrutura:after{
  position: fixed;	
  content:"Estrutura";
  width:20%;
  height:20px;
  background-color: blue;
}
<div class="estrutura">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/550px-Biandintz_eta_zaldiak_-_modified2.jpg">
</div>

4
  • O encima que você quer dizer, seria antes ou sobre? se for antes você pode usar o :before assim o content é posto antes da imagem Commented 16/05/2016 às 17:17
  • Em cima da imagem. No rodapé dela. Na parte debaixo.
    – Zkk
    Commented 16/05/2016 às 17:22
  • já tentou usar o z-index? Commented 16/05/2016 às 17:58
  • Execute o Snippet e abra em tela cheia para poder ver o elemento criado
    – Zkk
    Commented 16/05/2016 às 19:01

2 Respostas 2

1

Isso deve resolver seu problema. O position do .estrutura:after esta como relative, e foi acrescentado o top: -32px para fazer o texto subir e ficar em cima da imagem.

.estrutura{
  width:10%;
  height:30%;
  }

.estrutura:after{
  position: relative;	
  content:"Estrutura";
  width:20%;
  height:20px;
  top: -32px;
  background-color: blue;
}
<div class="estrutura">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/550px-Biandintz_eta_zaldiak_-_modified2.jpg">
</div>

0

Ao usar position: fixed;, o elemento irá se posicionar em relação ao documento (janela toda) e não ao elemento-pai.

Você deve setar position: relative; ao elemento-pai para que o pseudo-elemento :after seja posicionado dentro dele. Em seguida com os estilos top e left você posiciona ele onde você desejar sobre o elemento-pai:

.estrutura{
  width:10%;
  height:30%;
  position: relative;
  }

.estrutura:after{
  position: absolute;	
  content:"Estrutura";
  width:20%;
  height:20px;
  background-color: blue;
  bottom: 0;
  left: 0;
}
<div class="estrutura">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Biandintz_eta_zaldiak_-_modified2.jpg/550px-Biandintz_eta_zaldiak_-_modified2.jpg">
</div>

Note que como você está restringindo as dimensões do elemento-pai .estrutura menor que a própria imagem, a dimensão do :after irá se basear nesse tamanho também.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .