Gradient Blend Multiple Images

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: However, there's no fading/transition res

Solution 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%;
}

<divclass="container"><divstyle="background:#c3986b;"></div><divstyle="background:#0a4b67;"></div></div><divclass="container"><divstyle="background-image:url(https://dummyimage.com/150x100/c3986b/14151a)"></div><divstyle="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:00;
  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 ,#fff50px);
          mask:linear-gradient(to left,transparent ,#fff50px);
}
.container>div:last-child::before {
  right:0;
  left:-50px;
  -webkit-mask:linear-gradient(to right,transparent ,#fff50px);
          mask:linear-gradient(to right,transparent ,#fff50px);
}

<divclass="container"><divstyle="background-image:url(https://picsum.photos/id/1074/800/800.jpg)"></div><divstyle="background-image:url(https://picsum.photos/id/1060/800/800.jpg)"></div></div><divclass="container"><divstyle="background-image:url(https://picsum.photos/id/1070/800/800.jpg)"></div><divstyle="background-image:url(https://picsum.photos/id/1062/800/800.jpg)"></div></div>

Solution 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, i.e. 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, #c3986b45%, #0a4b6755%); /* adjust the % to your needs, the sum of both needs to evaluate to 100% */
}

img {border-radius: 50%}

<div><imgsrc="http://lorempixel.com/50/50/"alt="icon1"><imgsrc="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 %, e.g. 40% / 60%, to leave it horizontally centered. For decreasing its width, just do the opposite.