Skip to main content
Simplifiquei o código
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 0;
}
div {
    display: inline-block;
    position: relative;
}
.peb >div[class] img {
    filter: grayscale(100%); /* filtro que deixa a imagem preto e branco */
}
.red {
    position: relative;
}
.reddiv[class]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
div.red::after {
    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;
}
div.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=""><alt="cor"></div>
<div class="red" ><img src="http://placecage.com/130/250" alt=""><alt="cor"></div>
<div class="blue"><img src="http://placecage.com/130/250" alt=""><alt="cor"></div>
* {
    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>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 0;
}
div {
    display: inline-block;
    position: relative;
}
div[class] img {
    filter: grayscale(100%); /* filtro que deixa a imagem preto e branco */
}

div[class]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
div.red::after {
    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*/
}
div.blue::after {
    background-color: rgba(0, 0, 255, .5);
    mix-blend-mode: overlay;
}
<div><img src="http://placecage.com/130/250" alt=""></div>
<div class="peb" ><img src="http://placecage.com/130/250" alt="cor"></div>
<div class="red" ><img src="http://placecage.com/130/250" alt="cor"></div>
<div class="blue"><img src="http://placecage.com/130/250" alt="cor"></div>
ortografia e gramática
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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 cordas cores depois com o jQuery ou JS.

Veja um exemplo da mesma imagem comem 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 colocaicoloquei 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 listaoutro blend-mode e ainda ajustar o canal Alpha no carocor rgba para ter um resultado que mais te agrademelhor para cada tipo de acordo com a imagem.

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.

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 das cores depois com o jQuery ou JS.

Veja um exemplo da mesma imagem em 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 coloquei 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 outro blend-mode e ainda ajustar o canal Alpha no cor rgba para ter um resultado melhor para cada tipo de imagem.

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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