How to change image's color using only CSS3 (image has shades of Grey)?

Question

I will be grateful if you can help me to change image's color using only CSS3 (image has shades of Grey).

using some properties of CSS3 like filter ... thank you in advance!

Answer 1

You can achieve this by overlaying a pseudo-element on top of the image and using the mix-blend-mode property (check browser support). For the example below, I've used overlay.

*{box-sizing:border-box;margin:0;padding:0;}
figure{
    display:inline-block;
    position:relative;
}
img{
    vertical-align:middle;
}
figure::after{
    background:#f00;
    bottom:0;
    content:"";
    left:0;
    mix-blend-mode:overlay;
    opacity:.75;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
}

<figure>
    <img alt="" height="250" src="https://unsplash.it/500/250?image=1082&gravity=south" width="500">
</figure>

Answer 2

You can user filter css3,
.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}
Where is one of:
    blur()
    brightness()
    contrast()
    drop-shadow()
    grayscale()
    hue-rotate()
    invert()
    opacity()
    saturate()
    sepia()
    url() - for applying SVG filters
    custom() - "coming soon"

Answer 3

as far as i know you can't turn an original grey image into a colored one. closest thing to that is using sepia but that won't work as you want.

the idea is to use at first a colored image , make it gray with grayscale(100%) or saturate(0%) and then ( maybe on an event eg:hover,click,focus etc ) color it again with one of the filter properties

see example below

img {
filter:grayscale(100%);
height:200px;
width:auto;
}
img:hover {
filter:hue-rotate(100deg);
}

<img src="https://placeimg.com/640/480/animals">

let me know if it helps