mask element on background image with transparent color overlay

Question

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.

Is it even possible with CSS ?
failed DEMO: link

HTML structure:

<div id="opacity">
    <ul>
        <li>
            <div class="mask">
                <a class="fancybox" rel="group" href="#">
                    <img src="name.png" class="thumb" />
                </a>
            </div>
        </li>
        <li>
            <div class="mask">
                <a class="fancybox" rel="group" href="#">
                    <img src="name.png" class="thumb" />
                </a>
            </div>
        </li>
    </ul>  
</div>

Answer 1

The way I know you can fake it is setting that image on the mask containers too adding the property

 background-attachment: fixed;

Like this:

.mask {
   background-image: url(http://justbeecosmetics.com/img/headImage.jpg); 
   background-attachment: fixed;
   background-size: cover;
}

Check The Updated Demo

From W3

The background-attachment property specifies whether a background image is fixed with regard to the viewport or scrolls along with the containing block.

The default value is scrollthen if you set it to fixed

The background image does not scrolls with the element.

Is attached to the viewport.

Answer 2

How about using borders with rgba() values to give transparency :

DEMO

CSS :

body {
    background-image: url(http://justbeecosmetics.com/img/headImage.jpg); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

#opacity {
    position: absolute;
    top: 0;left:0;
    width: 100%;height: 100%;
}

ul li {
    list-style-type:none;
    float:left;
    margin:10px;
    position:relative;
}
ul li:after{
    content:'';
    position:absolute;
    top:-9999px;
    left:-9999px;
    width:100%; height:100%;
    border-color: rgba(0,0,0,.5);
    border-left-width: 9999px;
    border-top-width:9999px;
    border-bottom-width:9999px;
    border-right-width:20px;
    border-style:solid;
}
ul li:nth-child(2):after{
    left:0px;
    border-left-width: 0;
    border-top-width:9999px;
    border-bottom-width:9999px;
    border-right-width:9999px;
}
.mask {
    background:transparent;
    padding:50px;
}
.thumb {
    width:80px;height:80px;
}