CSS3 - Blending Mode between different HTML Elements

Question

I have an good idea what the answer is going to be, but I just want to make absolutely sure.

I have two elements, div.glass and div.sound, both contain a background-image. Is it possible to set the blending mode to each div so that they interact with each other? For example:

div.glass,
div.sound {
  width: 597px;
  height: 154px;
  position: absolute;
}
div.glass {
  background: url(glass.png) 0 0 no-repeat;
  z-index: 9;
  top: 5px;
  left: 5px;
}
div.sound {
  background: url(soundwave.png) 0 0 no-repeat;
  z-index: 10;
  blend-mode: multiply;
  top: 50px;
  left: 300px;
}
div.container {
  position: relative;
}

<div class="container">
  <div class="glass"></div>
  <div class="sound"></div>
</div>

Answer 1

You have 2 ways to use blend-modes

When doing it in the same element, the property is background-blend-mode.

But, when doing it with 2 elements. it is mix-blend-mode

div.glass,
div.sound {
  width: 597px;
  height: 154px;
  position: absolute;
}
div.glass {
  background: url(http://placekitten.com/1200/900) 0 0 no-repeat;
  z-index: 9;
  top: 5px;
  left: 5px;
}
div.sound {
  background: url(http://placekitten.com/1000/750) 0 0 no-repeat;
  z-index: 10;
  mix-blend-mode: difference;
  top: 50px;
  left: 300px;
}
div.container {
  position: relative;
}

<div class="container">
  <div class="glass"></div>
  <div class="sound"></div>
</div>

Answer 2

You can add the two backgrounds for a single div. This way, you can use the 'background-blend-mode' property to blend the two images.

Here's an example: https://jsfiddle.net/4mgt8occ/3/

HTML

<div class="container">
  <div class="glass_sound"></div>
</div>

CSS

div.glass_sound {
            width:300px;
            height: 300px;
            background-size: 100%;
        }
.glass_sound {
                background-image: url('https://unsplash.imgix.net/photo-1430760814266-9c81759e5e55?dpr=2&fit=crop&fm=jpg&q=75&w=1050'), url('https://unsplash.imgix.net/photo-1431184052543-809fa8cc9bd6?dpr=2&fit=crop&fm=jpg&q=75&w=1050');
                background-blend-mode: multiply;
            }

Answer 3

You might need to use background-blend-mode instead of blend-mode:

div.glass,
div.sound {
  width: 597px;
  height: 154px;
  position: absolute;
}
div.glass {
  background: url("http://i656.photobucket.com/albums/uu288/dragon-g/glass.png") 0 0 no-repeat;
  z-index: 9;
  top: 5px;
  left: 5px;
}
div.sound {
  background: url("http://vignette3.wikia.nocookie.net/youngjustice/images/e/ee/Sound.png/revision/latest?cb=20130330173251") 0 0 no-repeat;
  z-index: 10;
  background-blend-mode: multiply;
  top: 50px;
  left: 300px;
}
div.container {
  position: relative;
}

<div class="container">
  <div class="glass"></div>
  <div class="sound"></div>
</div>