Alternative to CSS Blend Mode in IE?

Question

I'm using the background-blend-mode on this:

<a href="#" class="blend">
    <h3>Title</h3>
    <p>Content goes here</p>
</a>

It has a url set for the background-image. When .blend is hovered over, it changes the background to this:

.blend:hover {
    background-blend-mode:multiply;
    background-color: rgba(0,0,0,.6);
}

So it works, but not in IE (of course). What alternatives are there? Is there some sort of jQuery trick that I can use to get it to work in IE? Or is there a prefix I could use, say -ms- or something similar?

Answer 1

Not the best solution I know, but as IE and MS Edge can't use background-blend-mode ( http://caniuse.com/#feat=css-backgroundblendmode ).

I get around this by adding a :after class to the element and manipulating that via background-colour and playing with the opacity on the pseudo element.

DEMO

https://codepen.io/nicekiwi/pen/PmZdMK

HTML

<div class="blend"></div>

CSS

.blend {
  background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');
  background-repeat: no-repeat;
  background-attachment: cover;
  width: 200px;
  height: 200px;
  position: relative;
}

.blend:after {
  width: 100%;
  height: 100%;
  content: '';
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s; /* lets transition to be fancy ^_^ */
}

.blend:hover:after {
  opacity: 0.3;
}