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>

Answer 2

You can combine the background: linear-gradient() with Flexbox to achieve something like this:

 div { display: flex; /* displays flex-items (children) inline */ justify-content: space-around; /* horizontal alignment / icons are evenly distributed with equal space around them, ie all have equal space on both sides, that's why there are two units of space between them / you can also experiment with other values such as: "space-between", "space-evenly", "center" etc. */ align-items: center; /* vertically centered */ height: 100px; background: linear-gradient(to right, #c3986b 45%, #0a4b67 55%); /* adjust the % to your needs, the sum of both needs to evaluate to 100% */ } img {border-radius: 50%}

 <div> <img src="http://lorempixel.com/50/50/" alt="icon1"> <img src="http://lorempixel.com/50/50/" alt="icon2"> </div>

In the given example I've made the linear-gradient() to be 10% of parent's width . The number is calculated by subtraction of both values in % , 55% - 45% .

In order to increase its width , if so desired, just increase the bigger number and decrease the lower one, preferably by the same amount of % , eg 40% / 60% , to leave it horizontally centered . For decreasing its width , just do the opposite.

Answer 3

great example but how do you change it to horizontal bottom and top instead of vertical

 .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>