Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eu tenho uma div com uma imagen, gostaria de colocar uma outra div encima dela com um texto como faço isso?
Bem, é muito simples..
Crie uma div com o id 'img' ou outro qualquer.
No CSS defina a div exatamente do tamanho da imagem que você quer por ali, coloque position: relative..
Dentro dessa div 'img' coloque a imagem.
Ainda dentro da div 'img' coloque por baixo da tag '<img>' a div ou span ou link que você quer que fique voando por cima da imagem.
No CSS estilize esse outro elemento do jeito que você quer, e depois defina position: absolute e z-index: 999999, posicione com top e left ou right.
Exemplo no código:
<div id="img">
<img src="imagem1.jpg" width="150" height="150">
<div class="texto">Alguma coisa aqui</div>
</div>
O CSS fica assim:
#img {
position: relative;
width: 150px;
height: 150px;
}
#img .texto {
position: absolute;
top: 5px;
left: 5px;
background: #000; /Para o velhinho IE/
background: rgba(0, 0, 0, 0.5); /cor preta transparente para css3/
padding: 3px;
border-radius: 2px;
z-index: 999999;
}
Tenta ae.
Grave essa logica, para quando você precisar fazer alguma outra coisa parecida com isso, você ja vai saber o que fazer..
Abrass e boa sorte..
Opa obrigado funcionou!
Trabalhe com z-index e position.
:seta: http://www.html.net/tutorials/css/lesson15.php