Olá, bom dia. Gostaria de saber como posso sobrepor parte de uma imagem em outra. Estou a tentar montar uma pagina da web, para por em prática o que tenho aprendido no curso.
Grato pela atenção,
Emanuel Sousa
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, bom dia. Gostaria de saber como posso sobrepor parte de uma imagem em outra. Estou a tentar montar uma pagina da web, para por em prática o que tenho aprendido no curso.
Grato pela atenção,
Emanuel Sousa
Olá Emanuel, tudo bem?
Uma forma que você pode tentar fazer é colocando position: relative no elemento pai dessas duas imagens, position: absolute na imagem que você quer sobrepor e ir movimentando essa imagem com top, right até que esteja na posição que você deseja. Veja um exemplo abaixo:
Temos o seguinte código:
<div id="elemento-pai">
<img id="imagem1" src="data:image/png;base64,iVBORw0KGgoAAAANS...">
<img id="imagem2" src="data:image/png;base64,iVBORw0KGgoAAAANSUh..">
</div>
Legenda:
Imagem 1 : azul claro.
Imagem 2 : azul escuro.
Supondo que gostaríamos de sobrepor a imagem 2 na imagem 1, o código ficaria da seguinte forma:
#imagem2 {
position: absolute;
left: 70px;
}
#elemento-pai {
position: relative;
}E esse será o resultado:
Espero ter ajudado! Caso tenha alguma dúvida ou dificuldade na hora de aplicar em seu projeto, fique a vontade para me enviar o código HTML e CSS completo ou compartilhar o link do repositório, assim consigo visualizar melhor e tentar solucionar.
Abraços e bons estudos!
Olá, Beatriz.
Muito obrigado. Irei tentar.
EASOUSA