How to put color on the image without affecting the transparent area?

I am wondering how to put color on the image without affecting the transparent area. I must say that I want to apply a gradient with a hard transition.

I tried to implement it through the svg, but there is a problem in the animation of the gradient.

I tried to make it through the mask, but it works correctly only in webkit.

There was an option to make a div with a gradient, and on top of it lay a picture with a background (I've seen on other sites), but my background does not allow to do it is not noticeable to the eye.

Default picture:

It should be:

It should be possible to animate:

Thanks for answers! :)