How to ignore transparent pixels with background blend mode

Question

See this JSFiddle

.goblin {
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  width: 600px;
  height: 500px;
  background-color: red;
  background-blend-mode: normal;
}

.goblin:hover {
  background-blend-mode: multiply;
}

Notice how when you hover over the image, it is correctly applying the red tint to the goblin. However, I only want the red to apply to the goblin, not the transparent pixels around him. Is there a way to do this with CSS?

Here is a closely related stackoverflow post. I was not able to use this solution because the image used in this one was very basic and only had a single color. -webkit-mask-box-image does not work for more complex examples.

EDIT: Here is a pic of what I want it to look like: https://i.stack.imgur.com/WBHDF.jpg

Answer 1

You could use the mask-image CSS property. Its experimental but fairly well supported.

Here I've used the same image as both the mask and the background:

.goblin {
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  width: 600px;
  height: 500px;
  -webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  -webkit-mask-mode: alpha;
  mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  mask-mode: alpha;
}

.goblin:hover {
  background-blend-mode: multiply;
  background-color: red;
}

<div class="goblin"></div>