Is there any way to blend a non-hard-coded background into another non-hard-coded background using pure CSS or otherwise?

Question

I'm pretty positive this can't be done, but I figured I'd check before moving on to Plan B. I have a <header> that contains a photograph, which can be switched at will by the user whose left edge fades to transparent to reveal the remainder of the underlying color or pattern or whatever... whatever it is, it's also user-supplied so it could be anything.

In to order to retain the design while allowing users without knowledge of or access to an image editor that would apply the mask to the photo they want to use, I'm trying to find a way to use an unedited texture/color along with an unedited photograph to produce the following effect:

All I can come up with right now is to manually apply a 100% white to 0% white mask to the left edge of the photo in Photoshop. But like I said, this can't be done by my target user - I need for them to be able to upload a new image and keep the image-fading-into-background effect.

I have done this successfully with 1 of the 2 elements being a solid background with a pseudo-element as in this CodePen (extremely rough - for proof of concept only). But again, I need BOTH the contents or background of .inner and the background of .outer to be user-supplied (and possibly changed in response browser events). The same Pen also shows a version using -webkit-mask-image rather than the pseudo element, which gets it closer, but is lacking IE support.

Without extensive SVG coding (it's not worth the time -- for this use case -- to keep the variable background pattern/image), is there a way (preferably PURE CSS) to achieve this masking effect without having to edit either image?

Answer 1

As said by @Bryce Howitson you can use mask

.box {
  width:300px;
  height:200px;
  position:relative;
}
.box:before,
.box:after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-image:url(https://picsum.photos/id/2/800/800);
   background-size:cover;
   background-position:center;
}
.box:after {
   background-image:url(https://picsum.photos/id/13/800/800);
   -webkit-mask:linear-gradient(to right,#fff 35%,transparent 70%);
   mask:linear-gradient(to right,#fff 35%,transparent 70%);
}

<div class="box">

</div>

Answer 2

¯_(ツ)_/¯

IF IE support is a hard requirement, you're pretty much out of luck using pure CSS for masking. You could simply dump support for IE and then proceed with mask-image since it even works in MS Edge. Only your own usage stats can tell you if this is a good idea.

Option 2

Dump the second image and use a gradient overlay of the main image to a flat color background. Which you probably don't want to do, but it's a decent progressive enhancement option.

Option 3

Its a lot of work but you could use Canvas and Javascript to fake it. The basic idea is to slice the main image into individual canvas elements. One element for each pixel wide the image is and then draw the source image into the canvas elements with the correct offset. The slices then stack side by side in the canvas re-making the full image. At this point, you can change the opacity of each slice until you get a gradient fade effect.

For example, if the image fades out to the right side, the furthest right slice is 0% opaque, the next to the left is 1%, then next is 2%, etc

This is untested, but something along these lines except this fades evenly from left opaque to right trasnparent:

var theCanvas = document.getElementById('canvasContainer');
fadeImage = theCanvas.getContext('2d');
for (var i = 0; i < sourceImage.width; i++) {
    fadeImage.globalAlpha = (sourceImage.width - i) / sourceImage.width;
    fadeImage.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);
}