CODEWITHSUNDEEP
htmlcssbackgroundtransparencytransparent
01e5Dk
01e5Dk

Reputation: 400

mask element on background image with transparent color overlay

sample transparency

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>

Upvotes: 4

Views: 12379

Answers (2)

DaniP
DaniP

Reputation: 38252

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.

Upvotes: 5

web-tiki
web-tiki

Reputation: 103790

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;
}

Upvotes: 2

Related Questions