With CSS is it possible to merge two Images?

Question

I saw this and wondered if it would be possible to merge two images with CSS only.

---

Is there any way to control this partial transparency of one image over the other, or of an image over a background or text?

I tried with opacity, but it did not even come close to the desired effect, as it does not have the "merging" of an image merging in the other.

body {
  margin: 0;
  padding: 0;
}
main {
  position: relative;
}
.bg1,
.bg2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: none;
  background-position: center;
}

.bg1 {
  background-image: url(https://unsplash.it/600x400/?image=881);
}

.bg2 {
  background-image: url(https://unsplash.it/600x400/?image=902);
  opacity: .5;
}

<main>
  <div class="bg1"></div>
  <div class="bg2"></div>
</main>

Answer 1

img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

Use Mask-image CSS, see below.

Example where the image has opacity gradient from right to left (to left).

The opacity parameter can be changed here rgba(0, 0, 0, 1), where 1 is the visible maximum.

Apply in the sense you need in other images (to left, to right, to bottom, ...)

img  {
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}

Answer 2

you can use the RGBA in your backgroud (Image), and set the transparency at the end, for example

attribute { background-color : rgba(50,50,100, 0.5) - where 0.5 would be the amount of transparency applied.