CODEWITHSUNDEEP
htmlcsssvg
Alex P.
Alex P.

Reputation: 3787

Semi-transparent overlay/mask with hole

How to make something like this?

enter image description here

I tried to use 3 divs with position: absolute (and 2 of them with transformation: skew(...)). It works but not perfect. For example in IE there is some space between top and bottom divs (and I cannot put one on top of another because the color will become darker), also left and right sides are skewed too (though it probably can be fixed by adding two white divs here)

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        html {
            display: table;
            margin: auto;
        }
        body{
            display: table-cell;
        }

        .container {
            padding: 15px;
            margin-bottom: 30px;
            position: relative;
        }

        .mask {
            background: rgba(0, 0, 0, 0.78);
            position: absolute;
            z-index: 99;
        }

        .mask-top {
            top: 0;
            left: 0;
            width: 100%;
            height: 70%;
        }

        .mask-left {
            width: 43%;
            height: 30%;
            left: 0;
            bottom: 0;
            margin-left: -24px;
            transform: skew(-16deg);
        }

        .mask-right {
            width: 43%;
            height: 30%;
            right: 0;
            bottom: 0;
            margin-right: -24px;
            transform: skew(16deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="http://i.imgur.com/cnvTRdz.png"/>

        <div class="mask mask-top"></div>
        <div class="mask mask-left"></div>
        <div class="mask mask-right"></div>
    </div>
</body>
</html>

http://jsfiddle.net/sw4tr5bc/2/

Is there any better way? Except CSS Masking which is not supported in IE.

UPD:

Here is the working solution (with SVG, as suggested in answer)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        html {
            display: table;
            margin: auto;
        }
        body{
            display: table-cell;
        }

        .container {
            padding: 15px;
            margin-bottom: 30px;
            position: relative;
        }

        .mask {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="http://i.imgur.com/JlWbC0z.png"/>

        <svg class="mask" width="100%" height="100%" viewbox="0 0 798 798">
            <path d="M0 0 L0 798 L270 798 L340 570 L455 570 L520 798 L798 798 L798 0 L0 0 Z" fill="black" opacity="0.78"></path>
        </svg>
    </div>
</body>
</html>

http://jsfiddle.net/sw4tr5bc/3/

Upvotes: 3

Views: 1569

Answers (1)

smnbbrv
smnbbrv

Reputation: 24541

Just make an inline SVG and put it over your image, e.g. take a look at this SVG:

<svg width="200" height="200">
  <path d="M0 0 L200 0 L200 200 L150 200 L150 150 L100 150 L100 200 L0 200 L0 0 Z" fill="black" />
</svg>

This should work starting from IE9 (and of course it works in all modern browsers).

This does not directly seem like the result you want to achieve but this is just a direction to go. In fact to successfully apply it to your case you just need to change a couple of numbers in the SVG above.

Some explanation on the process:

M0 0 - put the start of your path to x=0 y=0
L200 0 - line to x=200 y=0; then with some more lines you just draw your figure until you return by L0 0 to the beginning
fill="black" sets the color of the figure

So finally you can build any path using this simple notation. Then you can use opacity on SVG to make the background picture visible.

Also to improve your code and avoid polluting HTML you could put this SVG as a data-uri in your CSS, e.g. see my another answer which also uses SVG to solve CSS problems to learn how to do that. Just keep in mind if you also want this CSS method work in IE9 you would need to encode it as a URL. Anyway this is just a piece of sugar, it will work without any problem as inline HTML SVG as well.

Upvotes: 3

Related Questions