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
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.
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.
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.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With