Glass window mask using CSS

So if you think with your CSS brain, and even do some light reading on google, you will quickly come to the assumption that creating an opaque mask over an image that exposes a square ‘window’ is just not possible.

sunset1
Left: Original image. Right: Image with mask exposing a window of the image underneath

So the solution was actually really simple. The mask is an absolutely positioned div, set with a width and height of the window I required.

Then to achieve the mask effect over the rest of the image, I just set the mask’s border width appropriately and set the colour using RBGA to achieve the opaque effect.

.mask {
 position: absolute;
 top: 0;
 left: 0;
 width: 190px;
 height: 60px;
 border-style: solid;
 border-width: 120px 130px 320px 80px;
 border-color: #000; //fallback for non rgba support
 border-color: rgba(0, 0, 0, 0.5);
}


Caveats

This will work in most modern browsers that support RGBA. For the ones that don’t, you’ll just see a solid mask as opposed to an opaque one.

There is an open ticket on CSS PIE to support border transparency but there hasn’t been any movement for a while.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s