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


Tags: css,internet-explorer

Problem :

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



Solution :

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)
    $("div.img").addClass("curtain");

...and the CSS...

img.curtain::after { ... }

    CSS Howto..

    How to get this functionality to work

    How to align image to the right?

    How to extend this navigation bar off the page?

    Animate css depending on mouse movement [how can I improve]

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    how to make Sections in one line?

    How to access files from this hierarchy?

    Show notification counter with bootstrap

    How can I display two images horizontally?

    How to have a css element with transitions except initially?

    How to use easily svg as icon?

    How do I keep a span from being at the end of a line?

    How to alternate rowcolor in a GridView using pure CSS?

    How the browser identifies the CSS framework? [closed]

    How is designing shape similar to waves with html and css?

    How to set readonly property of textbox from css

    How to modify how TinyMCE format text

    How to add a CSS specifc for Google Chrome? [duplicate]

    How do I change the placeholder like as the elements replace each other place?

    How to align tags withina div

    If you remove float: left they are centred, in combination with setting text-align: center with their parent div. That is, their immediate (first) parent div; give this an id....
    Read more

    how can i center a nested div

    How to animate an icon for with CSS?

    How do I make the background transparent?

    CSS - How to add a second background image

    How to remove space between bannner and content in wordpress theme?

    How to import a CSS file from an external bundle resource

    How can i perform a smooth css transition to my sticky bar?

    How to adjust the position of specific elements/items/content on a page with CSS

    CSS: how to select parent's sibling [duplicate]

    How can I make a fix positioned menu bar?