Can CSS allow a gradient transition from one image into another? - css

Question

I am currently using an image tag within a div to display a site header. A new feature request has come up that would require us to keep several different versions of this same image with different lighting, and then show one image on the left of the header with a soft transition to the other image on the right. Even better if we can use 3 or more images.
An example is below using an old 3D render of mine. Imagine we have one sunset image, one daytime image, and want to create the image below using nothing but them and CSS. The original images can be found at the below addresses if you'd like to use them in a fiddle:
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore.jpg
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore_Sunset.jpg
For those who cannot see the example and need further clarification: The images are all 800 pixels wide. The final result should be an 800 pixel wide image. The left of the resultant image should be image-1, the right should be image-2, and in the center they should fade. I would expect this to be possible with CSS background-image and linear-gradient somehow, but my searches have turned up oddly empty. Is this possible with CSS?

Answer 1

A solution using mask image (with a very low support)
.base {
width: 600px;
height: 400px;
position: relative;
background-image: url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: cover;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: cover;
-webkit-mask-image: linear-gradient(to left, transparent, white);
}
<div class="base"><div class="overlay"></div></div>
And another solution using blend mode. This one, as it is, is supported in most modern browser. (With the usual exception of Edge). I have added an animation on hover.
I believe there is a slight issue involving probably the gamma calculation, there are locations where the result is darker than it should be. I have tried to fix it make the gradient lighter.
.container {
width: 600px;
height: 400px;
position: relative;
}
.container div {
width: 100%;
height: 100%;
position: absolute;
}
.container:hover div {
animation: slide 6s infinite;
}
.image1 {
background-image: linear-gradient(to right, black 33%, #444 40%,#ddd 60%, white 66%), url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
}
.image2 {
background-image: linear-gradient(to left, black 33%, #444 40%,#ddd 60%,white 66%), url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
mix-blend-mode: screen;
}
#keyframes slide {
from { background-position: left center, center center;
}
to {background-position: right center, center center;}
}
<div class="container">
<div class="image1">
</div>
<div class="image2">
</div>
</div>

Answer 2

mask-image is solution to your problem, however it is currently only supported by webkit
if you want to have cross-browser solution I suggest you use SVG instead