Possible cross-browser solution to blend one DIV / Image into another?

[RockinAkin]

Been searching for days, but no one seems to have a solution for this one so far:

Here is a test demonstrating what I’m trying to do:
http://jsfiddle.net/03uzj1of/1/
(Only displays correctly in Chrome)

I’m basically overlapping one div onto another, and trying to do a soft gradient blend between them. -webkit-mask-image does the trick just fine for Chrome, but it doesn’t work for Firefox or IE.

Does a cross-browser solution/replacement for -webkit-mask-image exist? Is there any other way to get this effect? – I’m open to using Javascript / Jquery if needed.

[jelmore110]

Currently support is extremely limited for mask-image.

Read here – https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image

As an alternative maybe try using a blur filter – https://css-tricks.com/almanac/properties/f/filter/

[jelmore110]

Note that filters aren’t fully supported either, but it at least gets you closer than mask-image. For now, I wouldn’t recommend using these styles on production sites.

[RockinAkin]

Right, both filter and mask-image don’t have the cross-browser support I’m hoping for. Perhaps this isn’t possible to do with CSS?

Perhaps there’s a clever way to achieve this effect with Javascript or JQuery?

[shaneisme]

It’s really easy in Photoshop.

[RockinAkin]

Of course, but eventually I’d like to have the images changing in an alternating slideshow manner. The example jfiddle is simplified to show what I’m after.

[Author]

Posts