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 use font awesome in own css?

    how to change the height of a div dynamically based on another div using css?

    How to get a border around this polygon?

    How to make this geometrical “translation” effect with javascript?

    How to inline style an embedded gist with CSS

    How to get CSS to work only on specific WordPress pages?

    How to make resizable li elements with CSS only

    How do I center (vertically and horizontally) buttons in a div tag?

    how to achieve this effect with css html?

    how to position icon just after h2 tag using :after pseudo even though 100% width

    How to stop loading pdf on mobile device?

    How to place an HTML element over another using CSS

    How to modify and save html/css in server-side?

    How to target separated class names through css?

    How to select the first paragraph in a div with a specific class (CSS 2)

    how to position a container in the middle of the screen? [duplicate]

    How to Change CSS of Custom Template JointJS Element?

    How to apply css to only one level of list items (not to child elements)

    How to restrict the css star selector * to a class and all decendants?

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    How to wrap a DIV around a DIV with CSS

    How can i reposition a sub ul in a responsive web site

    How can I use javascript or jQuery to make this table fill available width and height?

    JS+CSS How to display images from an array from top right to bottom left

    how to create a fixed js slider

    wordpress submenu css show on parent active and child active

    what is shape-id and how can I find it in a css file?

    How to smooth emboss in css

    How to show foreground image and then hide on hover?

    How to highlight the table row using jquery in Rails 3?