Understand CSS Mask in 4 Minutes 

😂😂🤣

@Mr X it could be and browser support would be better.

Check z-index property And if you set it already, then check that element - it's suppose to have position:relative/fixed/absolute

@@serjmarkelov9915 I have the same Problem. I tried playing with the z-index...still...I cannot fix it. Any suggestion?

@@antjestiller9846 what is "position" property of the element that you're trying to z-index?

Same Problem here. Has anyone found a solution?

@Red Stapler any chance you can help out with this. I have not figured it out yet.

png mask

Ionescu Mihail I would love that

If i understood it right, it would be better to create a photo montage mixing several building photos and several layers of sea of clouds, maybe done with custom photoshop brushes, and then export each one separated as png transparent. Then, it would be necessary to set the position of each one inside the html, setting the z-index correctly and animating it with a class to change the position of it when hover (using transition property). With javascript, would be necessary to set a mouse over event for every building which would toggle the class that animates the building position. Maybe it's not the best approach cause of the total weight of images it would create. Maybe using the canvas tag and load images inside with ajax requests... don't know, It's something to think about...

visual studio code

Good question. The advantage of CSS mask is: 1) Both methods need to load 2 images. But mask image size is much smaller (significantly if it's svg) 2) Mask actually "clip" html element to any shape while z-index method just position itself on top. This means you can't select or interact with the element underneath it. 3) z-index method will mostly need to rely on absolute position which might be difficult for some page structure However, the huge disadvantage is browser support as mask doesn't work on IE :)

scalability, faster loading time, svg path can also be animated/modify with javascript for dynamic mask.

building an ecommerce website is not a mere simple tutorial. this involve all levels of dev stacks. Despite worked on some projects myself, I have to admit I'm not confident enough to create a tutorial. It will do more harm than good :)

Or rather "The Missing Red Stapler"

until chrome doesn't want to work xD