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?

You might want [`-ms-filter`](https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx). See also [this question](http://stackoverflow.com/questions/25158696/blend-modemultiply-in-internet-explorer). — Blazemonger, May 26 '15 at 17:59
A filter would be applied to the entire element, rather than just the background. — Shaggy, May 26 '15 at 20:21
@Blazemonger: That question was the first thing I found but it only seemed to be applying to the image (from what I could understand at least). The function itself kept returning errors when I called it. — FranticJ3, May 27 '15 at 14:29

Nicekiwi · Answer 1 · 2017-04-19T23:23:55.350

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;
}

Alternative to CSS Blend Mode in IE?

1 Answers1