Make an image that goes from color to gray to gray disappears at the meeting point

Question

I'm trying to make an image that goes from color to shades of gray, has fading or something smooth instead of a sharp line at the meeting point between the color and shades of gray.

Here is 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%; } 

(Pay attention to the clear line at the meeting point between color and shades of gray)

I also need this to look bigger:

I really need help, and any advice or suggestions would be greatly appreciated. thank you

Answer 1

You can get this in background blending mode (but you need to set the image as the background instead of the image element)

How it works:

We have an image on the first layer. Another layer on it is a gradient going from white to black, and the blending mode multiplies. multiply by black gives black color, multiplying by white, saves the original image. So, now we have an image in which we can save or discard the original color, and the decision is based on the brightness of the gradient. The third layer is again an image, and now it mixes like luminosity. Applied on a black base, will give the image as shades of gray. Applied on the same image, will give a color image. You can set the grayscale needed to change the gradient levels.

 .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 can place a div above the image (or perhaps some pseudo-element), give it the desired gradient from black to transparent, and then apply the CSS mix-blend-mode rule.

Then you can play with some of the filters to adjust the brightness, etc.

The simplest 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>