Background blend mode on PNG images

Question

Long story short, I want my (any) image to change the color on hover, but I can't make it work well on PNG images. The problem is with transparency. I don't want to apply my color on transparent space. My CSS looks like this:

background-blend-mode: color-burn;
background-color: #edeb52;

Here is the full jsFiddle example. All I want is to get rid of that color around the icon, which should be transparent.

Answer 1

6 months late to the party but you could use the mask-image CSS property. Its experimental but fairly well supported:

.maskedimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
  -webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-size: cover;
  mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  mask-mode: alpha;
  mask-size: cover;
}

.maskedimage.blue {
  background-blend-mode: luminosity;
  background-color: blue;
}

.maskedimage.red {
  background-blend-mode: luminosity;
  background-color: red;
}

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

<div class="maskedimage original"></div>
<div class="maskedimage blue"></div>
<div class="maskedimage red"></div>

Alternatively you can get a similar effect using css filters:

.filteredimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
}

.filteredimage.blue {
  filter: sepia(1) hue-rotate(170deg) brightness(45%) saturate(1000%);
}

.filteredimage.red {
  filter: sepia(1) hue-rotate(313deg) brightness(45%) saturate(1000%);
}

.filteredimage:hover {
  filter: sepia(1) hue-rotate(313deg) brightness(25%) saturate(1000%);
}

<div class="filteredimage original"></div>
<div class="filteredimage blue"></div>
<div class="filteredimage red"></div>

Your mileage may vary.

Answer 2

This can be done with css, but unfortunately browser support is very bad (may be webkit only).

https://jsfiddle.net/devefrontend/fowzemd2/2/

.image .img {-webkit-mask-box-image:'YOURIMAGEURL';}

and this may be the same question as you:

Is there any way to colorize a white PNG image with CSS only?