How to put color over the image when mouseover?

Question

How to put color over the image when mouseover?

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Put color over the image when mouseover?

Normal image:

Imagewithoverlappingblackcolor:

How do you do this?

jquery css css3

asked by anonymous 03.09.2017 / 13:48

2 answers

Adding cart values from a session Android start only my application

score 2 · Answer 1

This kind of effect can be done in many different ways with both css and Jquery.

Using only css you can do by placing 2 divs, one inside the other. The first one with the image and the second with the black one, and making the second change the background color only when doing 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>

Notice that the background color was made with rgba to allow you to directly specify opacity, which in this case was 0.2 , which is almost transparent.

Another solution still in css is to start with the right style in the div filtro but leave it hidden with display:none , and only show it with display:block when hover is done.

.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>

This last solution will be more appropriate if you have several styles that you want to change when you move the mouse over.

score 1 · Answer 2

Doing with 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');  }    ) ;