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á, 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
hoje, com a Alura e o Google Gemini
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