Menu
Is there a cross-browser way to use CSS to change the shade of an image. For example, if I have a grayscale icon (an img element), I'd like it to change the colors to sepia on hover.
It would have to work on browsers other than IE, so I can't use filter. Is there some CSS 3 trick that would allow that?
959
We can change the image color in CSS by combining the opacity() and drop-shadow() functions in the filter property. We can provide the color of the shadow from the drop-shadow function, and we can set the shadow as thin as possible so that the image's color will only change without forming an actual shadow.
Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.
If the product team was kind enough to also provide a white version of the image, you can simply toggle the image's src on hover. This can be done using JavaScript. You can use an onmouseover function that sets the image's src to white. png and then an onmouseleave function that sets the image's src to black.
To change the color of an image to blue, we have to combine the below three functions with the filter property: sepia(%) – Adds sepia color to the image. hue-rotate(%) – Rotates the image hue on the color circle. saturate(%) – Adjusts the saturation level.
if you want to modify an image in css, it isn't possible to do that. but you can play with the opacity property. yeah that only set the image opacity, but it will be a nice effect. here is an example :
img{-webkit-transition:opacity .3s ease-in-out;}
img:hover{opacity:.6}
that snippet will give a nice transition effect of fade-in and out image into transparent.
in other case, you can use image sprite to do what you want :)
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
