<div class="wrap">
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/77/Google_Images_2015_logo.svg" alt="">   
 </div>
.wrap {
  width: 200px;
  padding: 20px;
  background-color: lightgray;
}

.wrap img {
  max-width: 100%;
  filter: brightness(0%);
}

.wrap:hover img {
  filter: brightness(0%) invert(100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.