Apply a css -webkit-filter grayscale before using a background-blend-mode keeping the color

Question

I'm trying to achieve a monochrome colored image on mouse hover, where the colors of the image are transformed to grayscale and the gray shades afterwards replaced with the shade of color i'm blending with.

It could look like this

To simulate this in photoshop you can grayscale a image add your desired color layer on top and blend it with screen mode.

As far as i understand css has this potential if you combine the css filter and the background-blend-mode, but the result will always be grayscale if you use the filter.

So i'm asking if there any other ways to get this blend, or to grayscale images before without the css filter

vals · Accepted Answer · 2015-05-10T18:05:10.250

You can do it in one single step, using luminosity as the blend mode.

In this mode, luminosity is taken from the front layer(the image), and the hue and saturation are taken from the background (here, a solid color)

The following demo gives you also the posibility to asign the color filter thru the class

.test {
    width: 400px;
    height: 200px;    
    margin: 10px;
    background-size: cover;
    background-image:  url(http://placekitten.com/1000/750);
}

.test:hover {
    background-blend-mode: luminosity;
}

.red {
    background-color: red;
}

.green {
    background-color: greenyellow;
}

<div class="test red"></div>
<div class="test green"></div>

Another solution, where black in the image gives full saturated color (instead of black). A little bit more complex to set up, but achievable.

.test {
    width: 400px;
    height: 200px;    
    background-size: cover;
    background-color: white;
    background-image: linear-gradient(red, red), url(http://placekitten.com/1000/750);
    background-blend-mode: screen, luminosity;
}

<div class="test"></div>

A way to have this effect as a reusable class. The image is already on the element, and we just set the class to set the effect and a separate class for the color.

So the sequence needs to be:

first layer = white
second layer the image, with blend set to luminosity. This way, the luminosity of the image is combined with white, giving white for high luminosity and black for low luminosity (i.e. a grayscale filter)
third layer, a solid color, with blend set to screen. this keeps the white as white, but changes black to the color.

We need to use a pseudo element for the final blend, to make it easy to set all this with an independent class. this will be set with mix-blend instead of background-blend :

#cat {
    width: 760px;
    height: 560px;
    background-image: url(http://placekitten.com/1000/750); 
}

.test {
    background-color: white;
    background-position: 0px 0px;
    background-size: cover;
    background-blend-mode: luminosity;
    position: relative;
}

.test:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.blue:after {
    background-color: blue;
}

<div class="test blue" id="cat"></div>

But then the shades are from white – color – black. I'm looking for a solution, where the black would be the color you're blending with. white – shades of the color – color. In this case the outside of the ears and the eyes would be red, not black. Any ideas? — hannes, May 05 '15 at 16:58
Added another solution. But this one is more difficult to generalize. — vals, May 05 '15 at 18:18
works perfectly! Thank you so much! One last question. Is there i slick way to take the background-image attributes apart. In my case the background image is set dynamically with Php. So i have a style attribute in wich i past the background-image URL in the container (hardcoded in the html). The color should be referring to a class of the container (css). Is there a way to apply the gradient in css and apply the background-image as a style in the container afterwards? Or does it have to be in a single statement, like you are using it? — hannes, May 07 '15 at 10:20
Not easy (I told you !) but achievable :-) Added snippet to the answer — vals, May 07 '15 at 16:24
Works perfectly! Thank you so much. I really don't understand how you could find out that i will work in this way, but maybe an explanation would be to much. It works! Thank you! — hannes, May 10 '15 at 12:40
I have tried to explain it a little bit . Hope it is somehow clear — vals, May 10 '15 at 18:05
Thank you so much for your effort and time to help me out and explaining things. I really appreciate it a lot! It's been a delight to learn from you. — hannes, May 12 '15 at 09:16

Apply a css -webkit-filter grayscale before using a background-blend-mode keeping the color

1 Answers1