CODEWITHSUNDEEP
javascripthtmlcss
Janath
Janath

Reputation: 1248

Change png image background color

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="">

Upvotes: 2

Views: 1005

Answers (1)

ellipsis
ellipsis

Reputation: 12152

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="">

Upvotes: 2

Related Questions