Gradient Blend Multiple Images

Question

How to make multiple images gradient blend to each other at only certain area as in the attached image below using CSS?

What I've tried:

.container {
  position: relative;
  display: flex;
  height: 200px;
}

.container:before {
  content: '';
  position: absolute;
  width: 80px;
  top: 0;
  bottom: 0;
  right: 50%;
  margin-right: -40px;
  background: url(https://www.w3schools.com/w3css/img_fjords.jpg);
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

.container > div {
  flex: 1;
  background-size: 100% 100%;
}

<div class="container">
  <div style="backgroud-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div>
  <div style="background-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div>
</div>

However, there's no fading/transition respecting to the background images as shown in below image:

UPDATE

I haven't receive any solid answer for my question but this code seems like the closest answer I can get till date.

A modification from PEN BY Peter Ramsing

<div class="hero-image">
  <img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" />
</div>
<div class="hero-before">
  <img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" />
</div>

<style>
img {
  /*  To contain the image to the confines of the div  */
  max-width: 100%;
}

.hero-image {
  max-width: 100%; 
  width: 800px;
  margin: auto;
 }
.hero-before {
  max-width: 100%; 
  width: 800px;
  margin: auto;
}

.hero-image::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  margin-top: -50px;
  height: 40px;
  width: 100%;
  content: '';
}
.hero-before::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  margin-top: -345px;
  height: 50px;
  width: 100%;
  content: '';
}
</style>

Answer 1

You may use some pseudo element that you put between the two images and apply linear gradient on it. By using the same colors you will create this effet. You may notice that the solution will work by using background color and also backround image, you simply need to respect the color used in the background and apply them to the pseudo element.

Here is an example, you may adjust the width of the pseudo element depending on your needs :

.container {
  position: relative;
  display: flex;
  min-height: 100px;
  margin-bottom:20px;
}

.container:before {
  content: '';
  position: absolute;
  width: 80px;
  top: 0;
  bottom: 0;
  right: 50%;
  margin-right: -40px;
  background: linear-gradient(to right, #c3986b, #0a4b67);
}

.container>div {
  flex: 1;
  background-size:100% 100%;
}

<div class="container">
  <div style="background:#c3986b;"></div>
  <div style="background:#0a4b67;"></div>
</div>

<div class="container">
  <div style="background-image:url(https://dummyimage.com/150x100/c3986b/14151a)"></div>
  <div style="background-image:url(https://dummyimage.com/150x100/0a4b67/14151a)"></div>
</div>

Here is another idea with mask that will work with any kind of images

.container {
  display: flex;
  min-height: 300px;
  margin-bottom:20px;
}


.container>div {
  flex: 1;
  background-size:0 0;
  position:relative;
  z-index:-1;
}
.container>div::before {
  content:"";
  position:absolute;
  background-image:inherit;
  background-size:cover;
  background-position:center;
  z-index:-1;
  top:0;
  bottom:0;
}
.container>div:first-child::before {
  left:0;
  right:-50px;
  -webkit-mask:linear-gradient(to left,transparent ,#fff 50px);
          mask:linear-gradient(to left,transparent ,#fff 50px);
}
.container>div:last-child::before {
  right:0;
  left:-50px;
  -webkit-mask:linear-gradient(to right,transparent ,#fff 50px);
          mask:linear-gradient(to right,transparent ,#fff 50px);
}

<div class="container">
  <div style="background-image:url(https://picsum.photos/id/1074/800/800.jpg)"></div>
  <div style="background-image:url(https://picsum.photos/id/1060/800/800.jpg)"></div>
</div>

<div class="container">
  <div style="background-image:url(https://picsum.photos/id/1070/800/800.jpg)"></div>
  <div style="background-image:url(https://picsum.photos/id/1062/800/800.jpg)"></div>
</div>