title: mask element on background image with transparent color overlay
body: <p><img src="https://i.stack.imgur.com/rEAtU.png" alt="sample transparency"></p>
  
  <p>That is example of what i try to achieve. Body has background image. Over the image is opacity layer. Then I got list of elements, which background supposed to be masked so that it is fully transparent.</p>
  
  <p>Is it even possible with CSS ?<br/>
  failed DEMO: <a href="http://jsfiddle.net/wL59b37L/10/" rel="nofollow noreferrer">link</a></p>
  
  <p>HTML structure:</p>
  
  <pre><code>&lt;div id="opacity"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="mask"&gt;
                  &lt;a class="fancybox" rel="group" href="#"&gt;
                      &lt;img src="name.png" class="thumb" /&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="mask"&gt;
                  &lt;a class="fancybox" rel="group" href="#"&gt;
                      &lt;img src="name.png" class="thumb" /&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;  
  &lt;/div&gt;
  </code></pre>