Colocar cor por cima da imagem ao passar o mouse?
Imagem normal:
Imagem com cor preta sobreposta:
Como faz isso?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEsse tipo de efeito dá para fazer de várias formas diferentes tanto com css como com Jquery.
Utilizando apenas css pode fazer colocando 2 divs, um dentro do outro. O primeiro com a imagem e o segundo com o preto, e fazendo o segundo alterar a cor de fundo apenas quando se faz hover
:
.imagem {
background-image:url(https://image.prntscr.com/image/crKy7Cb9SNG2CY91iJAaNw.png);
background-size:cover;
width:250px;
height:250px;
}
.imagem:hover .filtro{ /*estilo aplicado apenas no hover do div imagem*/
width:100%;
height:100%;
background-color:rgba(0,0,0,0.3);
}
<div class="imagem">
<div class="filtro"></div>
</div>
Repare que a cor de fundo foi feita com rgba
para permitir especificar diretamente a opacidade, que no caso foi 0.2
, que é quase transparente.
Outra solução ainda em css é começar já com o estilo certo no div filtro
mas deixa-lo escondido com display:none
, e apenas mostra-lo com display:block
quando é feito o hover
.
.imagem {
background-image:url(https://image.prntscr.com/image/crKy7Cb9SNG2CY91iJAaNw.png);
background-size:cover;
width:250px;
height:250px;
}
.filtro{
width:100%;
height:100%;
background-color:rgba(0,0,0,0.3);
display:none;
}
.imagem:hover .filtro { /*agora apenas mostra o div no hover*/
display:block;
}
<div class="imagem">
<div class="filtro"></div>
</div>
Esta ultima solução será mais apropriada se tiver vários estilos que queira mudar quando passa o rato por cima.
Fazendo com jquery:
<style>
.imagem {
background-image:url('https://image.prntscr.com/image/crKy7Cb9SNG2CY91iJAaNw.png');
width:250px;
height:250px;
}
.filtro {
display:none;
background-color:black;
opacity:0.4;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class='imagem'>
<div class='filtro'><div>
</div>
$('.imagem').hover( function() {$('.filtro').fadeIn('fast'); } , function() {$('.filtro').fadeOut('fast'); } ) ;