How to crack an unsupported CSS blended property?

Question

I program a gallery of images with a specific hover effect. When a user encounters an image, I use :: before pseudoelement to create a “curtain” over the div with the image using a CSS type property of mixed type:

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; } 

The resulting effect is as follows:

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

Can I crack this behavior in blended mode to act like in Firefox or Chrome?

If not, is it possible to hide the div cover or set it to translucent if and only if the mixed blend mode is not supported?

thanks

Answer 1

If you do not want to use transparent transparency as a backup:

Cross browser support approaches

Javascript polyfill This will be slow and won't let you animate easily. However, this will allow you to create an alternative image for each of your matching images, and then you can fade the opacity or do other CSS transition tricks between them.

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

Server-side processing It would not be my first choice, but if you control the code on the server side, you can prepare alternative images using image libraries on the server side (GD, etc.).

Only enable effect for browser support

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 CSS ...

 img.curtain::after { ... } 

Answer 2

I know this is an old question, but you can also use the @supports function request to determine if there is a specific property or not.

 @supports not (mix-blend-mode: multiply) { .image { ... } } 

If you're interested, you can learn more about the feature request: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports