All geek questions in one place

How to colorize an image in CSS?

Is there a cross-browser way to use CSS to change the hue of an image. For example, if I have a grayscale icon ( img element), I would like it to change colors to sepia on hover.

It will need to work with browsers other than IE, so I cannot use the filter. Is there any CSS 3 trick that would allow this?

+6
source share
3 answers

if you want to change the image in css, this is impossible to do. but you can play with the opacity property. Yes, this only sets the opacity of the image, but it will be a nice effect. here is an example:

 img{-webkit-transition:opacity .3s ease-in-out;} img:hover{opacity:.6}

This snippet will give a nice effect of transitioning the image into transparent and transparent.

otherwise, you can use the image sprite to do what you want :)

+4
source

There is no standardized cross-browser syntax for this that I know of. However, you can use the HTML5 canvas and make this effect yourself. Using SVG can also work, but I'm not sure how well all browsers, in particular Internet proxies, support SVG .

SVG example using color matrix conversion: http://www.dhmedia.com.au/sites/default/files/examples/SVG-filters/sepia.xhtml

+1
source

There is no exact way to do this in CSS, as already mentioned, you can use other technologies, namely Javascript.

In the most basic sense, you can try to mimic the sepia style by placing a div on top of the image with sepia color and opacity rgba(94, 38, 18, 0.2) , but this method is pretty crude. You can even overlay a transparent image, which may be better than this option (but still pretty trash).

+1
source

Source: https://habr.com/ru/post/903549/

More articles:


All Articles