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 highlight spaces in a tag? (CSS only)

    How to make list inside div expand after content in list

    How to set image in horizontal center of DIV to fill page width?

    How use a -ms-expand in GWT (Google Web Tolkit)

    Jquery how to get specific css values from css properties with stacked value options such as font-family

    How to keep image position despite window/device size?

    how do i remove the tab from this css megamenu

    How to correct CSS formatting problem in Visual Studio

    How to get CSS property value from HTML using generalistic JavaScript function
    When you use window.getComputedStyle the method directly return the style attribute calculated of your object. you can access directly the css attribute in the rreturn object. So to solve your...
    Read more

    How to position the whole site? css positioning problem [closed]

    Images not showing up in correct spot [closed]

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    How can I give an image a black opaque overlay?

    How to change the body background for three different div-s

    I've tried using vertical-align and color in static_nav div but it didn't work. Is this because its inside of the header? how would I fix this?

    jquery mobile data-filter css styling--how to?

    How to show/hide div on click with stricly HTML/CSS

    How to create this responsive grid of different sized images with CSS & HTML, example below

    Using css modules how do I define a global class

    Autohide Scrollbars - Show only when necessary

    How to negate conjunction of two attributes in CSS selector

    how to make NGINX serve static content like .js, .css, .html?

    How do i include font awesome classes in my css file?

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    How to make responsive text that isn't too large or too small

    How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

    List-style: how to hide that extra empty space

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How do you align text of one item in nav?