Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

image

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:enter image description here

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

like image 789
user874185 Avatar asked Mar 07 '15 14:03

user874185


People also ask

How do I convert a color image to grayscale?

Right-click the picture that you want to change, and then click Format Picture on the shortcut menu. Click the Picture tab. Under Image control, in the Color list, click Grayscale or Black and White.

How do I make an image grayscale in Powerpoint?

Go to Picture Tools Format. In the Adjust group, select Color. In the Recolor section, select Grayscale. It's the second option in the first row of the Recolor section.

What is greyscale Colour?

Grayscale is a range of shades of gray without apparent color. The darkest possible shade is black, which is the total absence of transmitted or reflected light. The lightest possible shade is white, the total transmission or reflection of light at all visible wavelength s.


2 Answers

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>
like image 51
vals Avatar answered Nov 15 '22 08:11

vals


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>
like image 27
Sebastian Simon Avatar answered Nov 15 '22 07:11

Sebastian Simon