Hi, I’m trying to solve masking in WF project but it doesn’t work as expected. I have it done before in websites but I do not understand how WF works. I have added style into Homepage but no luck.
Here is an example in codepen
It should be a very simple task, so why is not work in WF?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Does anyone know answer to this issue? I have read all issues on this forum with similar problem and even provided examples do not work. Is this bug to report or should I ask WF tech support to get answer? I will really appreciate any help or explanation what is the problem as I’m convinced that I have tried all to make it work (use img as background, embed HTML, place code to homepage etc) and still no luck in any browser.
Ok, have made it work. The result doesn’t appear in editor “preview” (only blank space 
) but only on published site. It will be nice to have a result shown in “preview” mode to save a lot of clicking to going there and back with each small adjustment. For now I’m just staring on empty white space and trust my guessing that I do my changes correctly.
Here is a working copy in Preview. Note: class names referenced in code should be all lower case.
Hi webdev, thank you to look into this issue. I have to commit that I have wrote class in camelCase by accident (variable JS habit) that caused code to crash. I know that camelCase is not recomended but crash the code? But I understand. I have realise it when I had a close look into code as “maskOn” in WF code editor looks like “maskon” (no big difference on “O” and “o”. Still have an issue with preview mode. When code is placed in page editor image in preview is shown in full size (no mask applied) and when code is placed in “embed HTML”, image is not visible at all. In both cases is mask effect visible only on published site. So there is inconsistency in preview results that made me scratch my head. Any kind of warnings on best practices and recomendation will be IMHO nice.
As for class names remember that Webflow replaces spaces with hyphens and uppercase to lower.
In the project I shared the mask and image are visible in preview and designer. Take a closer look at the implementation (chrome). Is that not the case when you view the preview I created?
I see that Chrome display preview correctly, unfortunately I’m working predominantly in Firefox and Safari and I use Chrome only occasionally when I need.