I’m attempting some slightly unique interactions with my portfolio site - using an SVG of the project name cutout to mask ( the image (set to z -1) of the project, then moving the image behind to create a parallax effect on scroll down.
I’ve run into a problem which is causing the image to bleed out from the edges of the name wrapper creating lines past the edges of the container. I’ve provided some screenshots of what I’m talking about:
I’ve tried hacking it and placing a white border around the parent div (inside and out), absolutely positioning a thin white div on the edge with a high z index - the image will always bleed out from the edge of the wrapper
Has anyone else come across something like this? Any help much appreciated.
Using a SVGon top of an image to simulate a mask is already some sort of a hack, so if that bugs, before trying to hack the hack, could you try to explore the CSS mask-image property? You can use your SVGs to mask other content. And if you use the custom code with a custom code element inside of the page ou’ll get the effects right in the designer.
Still having problems with the custom code; I used your exact structure and stylings for my collection items (pictured below) and it still does not work.
So turns out I was simply missing the ‘masked’ combo class on the ‘stage’ div. It now works perfectly for the static image.
I just made an attempt on my collection items - the mask works however it doesn’t utilise the SVG for each collection item instead only using it for ‘Pip App’.
Your site is going to be so cool! See, hours ago you said a portion of custom CSS code was gibberish for you, but still, Webflow empowers you to CSS mask your way into a great AND DYNAMIC design using CMS and variables inside of custom code… what a time to be alive…
The current issue is still on the projects page, the SVG field in the custom code is not being adopted by each collection item instead only using the pip app one.
