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:

相关标签:

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, 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, #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 %, e.g. 40% / 60%, to leave it horizontally centered. For decreasing its width, just do the opposite.