Как сделать картинку наполовину черно-белой?

#html #css

То есть как сделать половину (левую сторону) чёрно-белой, а вторую половину (правую
сторону) цветной.

Я хочу использовать это для показа прогресса заполнения от 0% до 100%.



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




    

Ответы

Ответ 1

Вариант с помощью градиента и background-blend-mode: luminosity;. Не работает в IE,
Edge и Safari. (Спасибо VenZell за замечание.)

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;
}



Ответ 2

Может быть так ??



.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%;
  
  }
}
 
  





Если с изображением то вот так



*{
  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%;   
  }
}
 
  
 
    
  




И ещё один 



*{
  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);
}
 

 
  

  

  

   
    




 

 
  

  

  

   
    





Ответ 3

Просто наложите картинку с фильтром на бэкграунд без фильтра. Это если адаптив не
нужен...



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%);}
}

  



Ответ 4

Может after и before.
before ставить цветной а after чёрнобелым