Solucionado
Fala galerinha, belezinha? Preciso sobrepor a borda na imagem, coloquei a borda na div que contém a imagem, usei z-index e absolute, mas não estou conseguindo resolver. Alguém ajuda?
Assim é como deve ficar!
Segue o código:
.border-foto{
border: 2px solid var(--laranja);
position: relative;
margin-right: 1rem;
width: 80%;
z-index: 1;
}
.foto-destaques{
margin-left: 3rem;
margin-top: -.5rem;
}border-foto é a div
foto-destaques é a imagem
ola, você precisa trazer a foto pra frente e deixar a borda laranja "escondida", certo?
o z-index aplicado na div vai refletir em todas as childs.
1⁰ teste pode ser aplicar o z-index=2; na ".foto-destaques"
Oi Noberto, eu preciso que a borda esteja à frente da foto!
Olá, acredito que eu consegui o efeito que você queria conforme imagem abaixo, mas foram necessárias algumas mudanças:
Basicamente a estratégia foi:
Adicionalmente eu implementei um :hover no parent para mostrar o child (borda laranja)
HTML
<body>
<div class="parent">
<div class="child" >
</div>
</div>
</body>CSS
.parent {
background-image: url("/quadrado-preto.png");
background-position: center;
background-repeat: no-repeat;
background-size: 500px;
width: 500px;
height: 500px;
}
.parent:hover .child {
display: block;
}
.child {
display: none;
position: relative;
top: 10px;
left: -20px;
border: 5px solid orange;
width: 500px;
height: 500px;
}Muito obrigada, Noberto! Era isso mesmo, eu tentei com z-index, mas as dimensões estavam erradas... Valeu pela colaboração com meus estudos!!!!!