Ján Janočko Ján Janočko - 3 years ago 206
CSS Question

How to hack unsupported mix-blend-mode CSS property?

I'm programming gallery of images, with specific hover effect. When user comes over the image, I use ::before pseudoelement to create "curtain" over the div with image using mix-blend-mode CSS property:

div.img::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
mix-blend-mode: soft-light;
background-color: red;

Resulting effect is like this:

enter image description here

But unluckily, IE (and some others according to caniuse) does not support this property and displays full red rectangle over the image and therefore it is not visible.

Is it possible to hack this mix-blend-mode behaviour to act like in Firefox or Chrome?

If not, is it possible to hide covering div or set it semi-transparent if and only-if mix-blend-mode is not supported?

Thank you

Answer Source

If you don't want to use plain opacity as a fallback:

Approaches to cross-browser support

Javascript polyfill This will be slow, and will not allow you to easily animate. However, it will let you create an alternate image for each of your matching images, and you can then fade the opacity or do other CSS transition tricks between the two.

http://codepen.io/brav0/pen/bJDxt (not my pen - uses multiply, not soft light)

Server side processing Wouldn't be my first choice, but if you control the server-side code, you can prepare alternate images using server side imaging libraries (GD, etc)

Only enabling the effect for supporting browsers

Css hacks for detecting IE

@media screen { @media (min-width: 0px) {
    div.img::after{ ... }
} }

Using JavaScript

if (window.getComputedStyle(document.body).mixBlendMode !== undefined)

...and the CSS...

img.curtain::after { ... }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download