Make a Image that goes from color to greyscale have a fade at the meeting point

Question

Im trying to make a image that goes from color to greyscale have a fade or something smooth instead of a sharp line at the meeting point between the color and greyscale.

Here's what i have: http://jsfiddle.net/gmU9y/104/

<div class="image-container">
    <img class="image-grey" src="http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg" />
</div>

.image-container {
    position:relative;
    display:inline-block;
}

.image-grey {
    display:block;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.image-container:after {
    background-image: url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg");
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

(Notice there's a sharp line at the meeting point between the color and greyscale)

I need it too look more like this:

I really need help and any advice or suggestions will be much appreciated. Thank you

Answer 1

You can get this with background blend mode (but you need to set the image as a background, instead of an image element)

How does it work :

We have in a first layer the image. Another layer on it is gradient going from white to black, and the blend mode is multiply. multiply by black gives black, multiplying by white keeps the original image. So now, we have an image where we can keep or discard the original color, and the decision is based o the gradient luminosity. The third layer is again the image, and now blends as luminosity. Applied on a black base, will give the image as grayscale. Applied on the same image, will give the colored image. You can set the grayscale needed changing the levels of the gradient

.test {
    width: 400px;
    height: 400px;
    background: url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"), 
      linear-gradient(0deg, black 0%, black 20%, white 80%, white 100%), 
      url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"); 
    background-position: 0px 0px;
    background-size: cover, 100% 100%, cover;
    background-blend-mode: luminosity, multiply;
}

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

Answer 2

You could put a div above the image (or maybe some pseudo element), give that one the desired gradient from black to transparent and then apply a mix-blend-mode CSS rule.

You can then play around with some of the filters to adjust the brightness, etc.

The rudimentary code would look like this:

<style>
.graylayer{
width:1024px;
height:576px;
background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
mix-blend-mode:saturation;
}
img,div{
position:absolute;
}
</style>
<img src="http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"/>
<div class="graylayer"></div>