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. (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 { ... }

    CSS Howto..

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    How set a page to maximum and minimum sizes via css

    How to make floated columns stretch to fill container vertically?

    How to structure CSS classes? By entities or by aspects?

    css3 : how to make div go up to bottom of page?

    How to reduce css http requests?

    How do I keep a fixed header on top if there's a small strip on top of it?

    how to solve in conflict css?

    How to optimize an image sequence in Chrome?

    How to center verticaly n inline containers with different font-size?

    How to preform whitelist-based CSS filtering in PHP

    How to fix css and jQuery slide show? [closed]

    How to align images and text in css?

    How is table cell height calculated?

    How to make a div and its children to ignore its parent styles?

    How to use different CSS in the same page

    How to slide a DIV on link click

    How to calculate percentages in LESS CSS?

    How to remove top / bottom margin from isotope masonry

    How to bottom-align these divs?

    How to reset a jquery function on-the-fly

    How do I remove the side padding in the following case?

    How to auto resize img group with browser change size?

    How to make LESS combine CSS rules with a comma

    How to set button images based on browser type

    How to call a jquery funcion with a css button?

    How to apply jquery ui styling on dynamically generated elements

    How to attach an element on the dynamically created div

    How do I center a container in my HTML/CSS?

    How to use bootstrap grid system overlaying a map