1

Eu preciso colocar uma div com um fundo background-image, e ao passar o mouse em cima dela com o :hover, apareça um background-color rgba transparente, e a imagem do fundo não desapareça, ficará levemente aparecendo com a transparência do background-color. Há essa possibilidade?

(OBS: Não posso criar esse efeito colocando uma div dentro da outra.)
Já tentei fazer assim: mas ele substitui um pelo outro

a{
  background: url("img.png") ;
}

.a:hover{
  background: rgba(43, 80, 142, 0.9);
}

5 Respostas 5

4

Olá! Você pode usar pseudo elementos como o ::before ou o ::after, segue um exemplo:

#background {
            position: relative;
            margin: 0 auto;
            width: 626px;
            height: 626px;
            background: url("https://image.freepik.com/free-vector/coloured-summer-background_1048-2276.jpg") no-repeat left top;
        }
        #background:hover::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(43, 80, 142, 0.5);
            opacity: 1;
        }
<div id="background"></div>

Espero ter ajudado :)

2
  • Deu certo, porem o texto que coloquei fica atras do background-color, e a transicao nao funciona
    – Miriam
    13/01/2019 às 12:08
  • @Miriam esta questão do texto é simples de resolver, você pode criar uma nova tag para o texto e manipular o z-index deste conteúdo. Veja essa ideia jsfiddle.net/gferreiraa/u2ovbf9e/1 13/01/2019 às 12:38
3

Olha vou te dar duas opções.

O resultado será ese, apesar de serem duas técnicas diferentes o resultado visual é o mesmo:

inserir a descrição da imagem aqui

Opção 1

Como vc disse que não era possível fazer com uma div dentro da outra eu fiz esse modelo para vc poder dar uma estudada nele e ver que sim é perfeitamente possível fazer o efeito usando uma div dentro da outra.

Vc apenas precisa que a div pai tenha position:relative e a div filha seja position:absolute, dessa forma a referencia do filho fica dentro do escopo do pai. No seu caso como vc quer fazer o efeito em um link <a> eu coloquei uma div dentro do <a> e setei os postions.

Segue o exemplo do código.

a {
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
    justify-content: center;
    align-items: center;
    background-image: url(https://picsum.photos/300/100);
    background-size: cover;

    color: #f00;
    font-size: 2rem;
    text-decoration: none;
    text-shadow: 0 0 2px black;
}
a div {
    transition: background-color 300ms;
}
a:hover div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(43, 80, 142, 0.9);
}
a span {
    position: relative;
    z-index: 2;
}
<a href="#">
    <div></div>
    <span>Lorem, ipsum dolor.</span>
</a>


Opção 2

Essa opção ainda é mais simples que a primeira, eu particularmente optaria por ela.

Aqui o que eu fiz foi usar um box-shadow que em vez de crescer para fora ele cresce para dentro do elemento, para fazer o box-shadow crescer para dentro vc precisa usar um inset e um valor bem grande de spread-radius vc pode ler mais sobre essa propriedade aqui. https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-shadow

Segue o código

a {
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
    justify-content: center;
    align-items: center;
    background-image: url(https://picsum.photos/300/100);
    background-size: cover;

    color: #f00;
    font-size: 2rem;
    text-decoration: none;
    text-shadow: 0 0 2px black;
    transition: box-shadow 300ms;
}

a:hover {
    box-shadow: inset 0 0 0 10000px rgba(43, 80, 142, 0.9);
}
<a href="#">
    Lorem, ipsum dolor.
</a>

2
  • hugocsl vc me salvou pela segunda vez! Nossa que espetáculo! Queria te dar um premio nobel, grataaaaaaaaaa!!
    – Miriam
    14/01/2019 às 1:01
  • @Miriam sem problemas, não precisa de premio rss o agradecimento já está basta. Até pq a resposta dos colegas tb está correta, eu só dei outras opções que achei que poderia te ajudar a entender o problema do efeito com duas div, ou outra opção mais "simples" usando o box-shadow. Boa sorte ai no projeto. abs
    – hugocsl
    14/01/2019 às 9:18
3

Olá, a solução da @Kamile esta correta, gostaria de aproveitar para completar com uma sugestão. Caso deseje utilizar além de um background-color com manipulação de opacity, você pode aplicar ele em forma de gradient da seguinte forma.

#background {
        position: relative;
        margin: 0 auto;
        width: 626px;
        height: 626px;
        background: url("https://image.freepik.com/free-vector/coloured-summer-background_1048-2276.jpg") no-repeat left top;
    }
    #background:hover::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: 
          linear-gradient(
           to bottom,
           rgba(0,0,0,0),
           rgba(0,0,0,1)
          );
        opacity: 1;
    }
<div id="background"></div>

Assim você consegue suavizar sua opacity, neste exemplo eu apliquei um linear-gradient manipulando o preto, ai fica ao seu critério gerenciar essa aplicação.

Obrigado, espero ter contribuído.

0

Você pode fazer a máscara de cor no background-image mesmo.

a{
    background-image: url('img.png'); 
    background-size: 100%;
  }
a:hover{
    background-image: rgba(43, 80, 142, 0.9), url('img.png'); 
    background-size: 100%;
  }
1
  • Isso não funciona, não da para usar rgba(43, 80, 142, 0.9) como valor de background-image 3/07/2020 às 12:10
-2

Aproveitando um gancho. Se quiser usar só apenas um propriedade do background, tipo o imagem, use background-image, ou outra mais "específica". Pois quando usa apenas o background é preciso preencher todos os parâmetros, do contrário os q não forem preenchidos será resetados. Acaba atrapalhando um pouco na hora de descobrir pq alguma propriedade não está funcionando.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .