Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Texto sobre uma imagem opaca

Eu fiz um pequeno texto sobre uma imagem no site home e queria fazer com que a imagem que está por baixo do texto ficasse com 70% de opacidade para que o texto que está sobre ela tivesse mais destaque mas quando eu coloco a opacidade o meu texto tbm fica opaco e perde a propriedade hover que eu coloquei, gostaria de enteder o motivo de alterar tanto a imagem como o texto e não apenas a imagem como eu desejo...

Sem opacidade e com o hover ativado para transformar o texto em italico: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Com opacidade, nesse caso o texto fica opaco e perde a interação do hover: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Olá, Thiago.

Tudo bem?

Entendi deve ser porque o texto está numa tag filha do qual você está aplicando a opacidade, e a tag pai reflete nas tag filhas.

Seria legal você compartilhar os cógidos HTML e CSS aqui com a gente, fica melhor para ajudar e testar algo. Você pode colar eles aqui mesmo direto sem ser print.

Valeu Thiago.

solução!

HTML:

<main>
            <section>
                <h2>Bem-vindo à Barbearia Alura</h2>
                <img class = "banner" src = "banner.jpg">   
            </section>

CSS:

.banner {
    width: 100%;
}

h2{
    position: absolute;
    font-size: 45px;
    font-weight: bold;
    color: #FFFFFF;
    top: 550px;
    right: 420px;
    text-shadow: 2px 2px 2px #000000;
    cursor: default;
}

h2:hover {
    font-style: italic;
}