CSS. Цвет картинки как шрифт. Инверсия

a { 
  display: inline-block; 
  font-size: 100px; 
  padding: .25em; 
  color: #157EFB; 
  background-color: white; 
} 
 
span { 
  display: inline-block; 
  overflow: hidden; 
} 
 
img { 
  width: 128px; 
  height: 128px; 
  display: block; 
} 
 
a:hover { 
  color: white; 
  background: #157EFB; 
} 
 
a:hover img { 
  transform: translateX(-100%); 
  filter: drop-shadow(128px 0 0 white); 
}

<a><span><img src="//i.stack.imgur.com/K8JyZ.png" height=128 width=128></span> + text</a>

span { 
  display: inline-block; 
  font-size: 100px; 
  padding: .25em; 
} 
 
span:hover { 
  color: white; 
  background: black; 
} 
 
span:hover img { 
  filter: invert(100%); 
}

<span><img src="//i.stack.imgur.com/5XdlR.png" height=128 width=128> + text</span>

.bg { 
  display: inline-block; 
  padding: 8px 8px 4px; 
  background: #aaa; 
} 
 
.bg:hover img { 
  -webkit-filter: grayscale(100%) brightness(1000%); 
  webkit: grayscale(100%) brightness(1000%); 
}

<div class="bg"> 
  <img src="https://s.imgur.com/images/imgur-logo.svg"> 
</div>