Fade two images together in CSS

Question

Say I have these two images:

How do I combine them like this, where one fades gradually into the other, using just CSS?

I need to do this using CSS because the images are user-supplied.

I've tried using CSS gradients, multiple background images, and blending modes, but wasn't able to achieve what I wanted. Also, wasn't able to find what I needed by googling.

I think there is an answer for you here : https://stackoverflow.com/questions/19713813/fade-image-to-transparent-like-a-gradient ;) — SKJ, Oct 18 '17 at 13:30
@UncaughtTypeError Thanks for the suggestion, but I'm not trying to do animation. — Nathan Arthur, Oct 18 '17 at 13:33
Oh I see, for some reason I read it as "fade in together" - my mistake — UncaughtTypeError, Oct 18 '17 at 13:34
@The_Death_Raw That gets me closer, but [it doesn't support IE or Edge](http://caniuse.com/#search=mask). — Nathan Arthur, Oct 18 '17 at 13:36

score 3 · Accepted Answer · answered Oct 18 '17 at 14:50

Here's a solution using the mask-image property.

Scale the browser window to see the images cross fade.

#Wrap {
  position: relative;
  height: 300px;
  width: 100%;
}

#Left,
#Right {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

#Left {
  left: 0;
  background: url('https://i.stack.imgur.com/kqa1P.jpg') top left no-repeat;
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  background-size: contain;
}

#Right {
  right: 0;
  background: url('https://i.stack.imgur.com/UvGLY.jpg') top right no-repeat;
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  background-size: contain;
}

<div id="Wrap">
  <div id="Left"></div>
  <div id="Right"></div>
</div>

Upvoted since this does what I need. Unfortunately, [it isn't supported by IE or Edge](http://caniuse.com/#search=mask)... I'll accept your answer tomorrow if no one can find a way to do it with better browser compatibility. — Nathan Arthur, Oct 18 '17 at 15:02
@NathanArthur Thanks, is anything supported in IE. It's been holding us developers back for decades, time it went in the bin lol. — DreamTeK, Oct 18 '17 at 15:10

score 0 · Answer 2 · answered Oct 18 '17 at 13:37

i have made you an example with backgrounds. position relative + both gradients bgs. maybe this works with your pictures

<body>
 <div style="position:relative">
  <div id="grad1">Image1asBG</div>
  <div id="grad2">Image2asBG</div>
 </div>
</body>

css:

    #grad1 {
    position: absolute;
    height: 400px;
    width:100%;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

#grad2 {
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width:100%;
    background: -webkit-linear-gradient(left, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,255,0,1), rgba(255,255,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,2550,0,1), rgba(255,255,0,0)); /* Standard syntax (must be last) */
}

fiddle: https://jsfiddle.net/d8v23w60/1/

These are nice, but don't explain how this would be done using images. — Nathan Arthur, Oct 18 '17 at 13:38

score 0 · Answer 3 · answered Oct 18 '17 at 13:50

0

I used opacity. Here is a working copy. I hope it will help you.

Try like this:

#img1 {
position:relative;
}
#img2 {
position:absolute;
left:5px;
opacity:0.5;
}

<img src="https://i.stack.imgur.com/UvGLY.jpg" width="400" id="img1">
<img src="https://i.stack.imgur.com/kqa1P.jpg" width="200" id="img2">

answered Oct 18 '17 at 13:50

All about JS

562
2
10

It might work in some situations, but I need them to gradually blend into each other, where one image is at full opacity on one side, and the other is at full opacity at the other side, and the two images decrease in opacity towards the center, in effect. – Nathan Arthur Oct 18 '17 at 13:54
So do you want the animation effect as well as ? – All about JS Oct 18 '17 at 13:56
No, I'm sorry, I guess my question wasn't clear enough. I don't need animation. I need [this](https://graphicdesign.stackexchange.com/a/39766/2633). – Nathan Arthur Oct 18 '17 at 13:58
Ok . let me try . – All about JS Oct 18 '17 at 14:43
Can you check this https://codepen.io/alexcarpenter/pen/LveDx.. see if it is helpful – All about JS Oct 18 '17 at 14:49
That's nice, too, but it's blending one image into a color instead of one image into another image. – Nathan Arthur Oct 18 '17 at 14:58

Fade two images together in CSS

3 Answers3