title: CSS3 - Blending Mode between different HTML Elements
body: <p>I have an good idea what the answer is going to be, but I just want to make absolutely sure.</p>
  
  <p>I have two elements, <code>div.glass</code> and <code>div.sound</code>, 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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="glass"&gt;&lt;/div&gt;
    &lt;div class="sound"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>