Uma das técnicas simples que vc pode fazer e colocar a imagem em preto e branco
e depois colocar uma película de cor
por cima dela, usando cor rgba, ou Hexadecimal com transparência conforme vc achar melhor. Assim facilita para vc trocar os valores da cor depois com o jQuery ou JS.
Veja um exemplo da mesma imagem com várias cores, apenas com CSS. Encapsulei a imagem em uma div
e coloquei um filtro grayscale(100%)
depois usando um pseudo elemento ::after
na div
eu colocai uma película colorida por cima da imagem e usei um mix-blend-mode
para fazer uma "mistura" entre a cor e a imagem.
Veja que no exemplo abaixo eu fiz um blend com "scree
" e outro com "overlay
", vc pode usar qualquer um dessa lista e ainda ajustar o canal Alpha no caro rgba
para ter um resultado que mais te agrade de acordo com a imagem.
OBS: deixei uns comentários no CSS para te ajudar
* {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 0;
}
div {
display: inline-block;
}
.peb > img{
filter: grayscale(100%); /* filtro que deixa a imagem preto e branco */
}
.red {
position: relative;
}
.red::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 0, 0, .5); /* .5 é onde vc contra a opacidade da cor rgbA*/
mix-blend-mode: screen; /* aqui vc pode testar outrs filtros para ver o que da o melhor resultado para sua imagem*/
height: 100%;
width: 100%;
}
.red > img {
filter: grayscale(100%);
}
.blue {
position: relative;
}
.blue::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 255, .5);
mix-blend-mode: overlay;
height: 100%;
width: 100%;
}
.blue > img {
filter: grayscale(100%);
}
<div><img src="http://placecage.com/130/250" alt=""></div>
<div class="peb" ><img src="http://placecage.com/130/250" alt=""></div>
<div class="red" ><img src="http://placecage.com/130/250" alt=""></div>
<div class="blue"><img src="http://placecage.com/130/250" alt=""></div>
Documentação sobre os filtros de CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Documentação sobre o Mix-Blend-Mode: https://developer.mozilla.org/pt-BR/docs/Web/CSS/mix-blend-mode