How to make a picture half black and white?

Question

That is, how to make half (left side) black and white, and the other half (right side) color.

I want to use this to show progress filling from 0% to 100%.

img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }

 <img src="http://pngimg.com/upload/assault_rifle_PNG1427.png" />

The old way is two versions of the picture and a limited display area, one on top of the other.

Answer 1 · 2016-07-27T23:22:18

Gradient and background-blend-mode: luminosity; . Does not work in IE, Edge and Safari . (Thanks to VenZell for the comment.)

https://jsfiddle.net/glebkema/rrnubzah/

 .progress { background-image: url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg), linear-gradient(90deg, #666 50%, transparent 50%); background-blend-mode: luminosity; height: 400px; width: 400px; }

 <div class="progress"></div>

It should be noted that this is not supported in IE, Edge and Safari.
And it is better to give a link to caniuse.com/#search=background-blend-mode .
Then correct the gradient syntax - the prefixes are no longer needed anywhere, if there is no desire to support the 15th firefox, the 25th chrome and the 11th Opera.

Answer 2 · 2016-08-10T03:42:10

Maybe so ??

 .spin{ width:60%; height:50px; margin:10px auto; border:1px solid transparent; } .parent{ width:0; height:100%; background:red; animation:width 10s infinite; } @-webkit-keyframes width{ from{ width:0; opacity:0; } 50%{ opacity:.3; } to{ width:100%; } }

 <div class="spin"> <div class="parent"></div> </div>

If with the image then like this

 *{ margin:0; padding:0; } img{ display:block; width:100%; height:100%; } .wr{ width:500px; height:100px; margin:30px auto; } .wr_img{ width:0; height:100%; overflow:hidden; animation:width 10s infinite linear; } .wr_img img{ min-width:500px; animation:grey 10s infinite linear; } @-webkit-keyframes grey{ from{ -webkit-filter:grayscale(100%); filter:grayscale(100%); opacity:0; } 50%{ -webkit-filter:grayscale(70%); filter:grayscale(70%); opacity:.5; } to{ -webkit-filter:grayscale(0%); filter:grayscale(0%); opacity:1; } } @-webkit-keyframes width{ from{ width:0; } to{ width:100%; } }

 <div class="wr"> <div class="wr_img"> <img src="http://ic.pics.livejournal.com/zzaharr/34875586/43970/original.png"> </div> </div>

And one more

 *{ margin:0; padding:0; font-size:0; } .a{ width:500px; margin:auto; position:relative; } .a img{ display:block; width:500px; height:300px; min-width:500px; max-width:500px; object-fit:contain; } .a .a2{ width:300px; overflow:hidden; position:absolute; top:0; right:1px; } .a .a2 img{ margin-left:-200px; -ms-filter: grayscale(1) sepia(1); -webkit-filter: grayscale(1) sepia(1); -moz-filter: grayscale(1) sepia(1); -o-filter: grayscale(1) sepia(1); filter: grayscale(1) sepia(1); } /*** .b ****/ .b{ width:500px; margin:auto; position:relative; } .b img{ display:block; width:500px; height:300px; min-width:500px; max-width:500px; object-fit:contain; } .b .a1{ width:200px; overflow:hidden; position:absolute; top:0; } .b .a1 img{ margin-left:; -ms-filter: grayscale(1) sepia(1); -webkit-filter: grayscale(1) sepia(1); -moz-filter: grayscale(1) sepia(1); -o-filter: grayscale(1) sepia(1); filter: grayscale(1) sepia(1); }

 <div class="a"> <div class="a1"> <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg"> </div> <div class="a2"> <div class="a22"> <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg"> </div> </div> </div> <div class="b"> <div class="a1"> <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg"> </div> <div class="a2"> <div class="a22"> <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg"> </div> </div> </div>

I didn’t want to change the code in the snippet: codepen.io/Geyan/pen/bZONwZ?editors=110

Answer 3 · 2016-07-27T19:50:54

Just put a picture with a filter on the background without a filter. This is if the adaptive is not needed ...

 div { width: 500px; height: 231px; background-image: url("http://beerhold.it/500/231"); overflow: hidden; } img { width: 250px; height: 231px; object-fit: none; object-position: top left; -webkit-filter: grayscale(100%); filter: grayscale(100%);} }

 <div> <img src="http://beerhold.it/500/231"> <div>

Not so voobschem will not go 2 this image will complicate the page loading even more.
On css, you will not do it differently - the properties are applied to the selector as a whole, and not to half.

Streletz 7.324 eight 18 34 · Answer 4 · 2016-07-27T19:40:53

Maybe after and before . before set color and after black and white

How to make a picture half black and white?

4 answers 4

More articles: