Change png image background color

Question

I just want to change png image background to blue when hover without using other image. Just only css. I've that css filters do the job so I tried few methods but no luck. I used css filter greayscale methord. Is there any to change background color to this #05adef other than greyscale? Here is the fillde

img{
  width: 120px;
}

img:hover{
   filter: grayscale(100%);
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">

Answer 1

Use background-color:#05adef

alternatively you can use hue-rotate(deg) but the catch is that you have to search for the perfect angle to match the desired color. Also use invert and contrast in conjunction for more control over the color.

img{
  width: 120px;
}

img:hover{
filter:invert(100%) hue-rotate(24deg);
 
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">