Streaming live at 10am (PST)

Image 'Bleeding' Out of Wrapper despite No Overflow


#1

Hi all,

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.


Here is my site Read-Only: https://preview.webflow.com/preview/tjtj-design-2-0?utm_source=tjtj-design-2-0&preview=e81a8877f634c411ec7e51d5921ff05f


#2

Hi TJ.

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.

I made a page showing different clipping and masking techniques: http://clipping-masking.webflow.io/

You’ll find examples of masking with SVG down the page.


#3

This is exactly what I’m looking for - you’re a legend!!!

Do you have the read only link of this page so I can grab the custom code?

Thank you enormously for you wisdom Sage Vincent! :raised_hands:


#4

I am finding it incredibly difficult to follow the instructions you have laid out on the link - I’m not a developer but can pick it up pretty easily.

I’m struggling for what to include in custom code and where the parts go.

Sorry for my ignorance!


#5

Don’t be sorry, you have to be there before being comfortable with it, don’t you?

I haven’t shared the read only link because after modofiying the page a lot and fighting with Chromes bugs, the page is a mess :slight_smile:

Let me go back to your read only link and try to craft a practical example for you. Be back in a few.


#6

Here’s a read only to a site with only a stage with an image inside and a custom code calling a SVG

https://preview.webflow.com/preview/vincents-fresh-project-30addc?utm_source=vincents-fresh-project-30addc&preview=a65149a9e3f536d9ddc9bdd60e3c4a56

Your SVG need to be just a black shape on transparent bg. Not a hollow shape as you have now.


#7

Hi Vincent,

Thanks again for your guidance!

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.

Have I inputed something incorrectly?


#8

I don’t know I don’t see that on the share link. Can you try first with static url to see if it works?


#9

Just tried with a static svg (uploaded into the photo and then copy and pasted the link) - unfortunately still no dice.

Still no dice


#10

Righty,

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’.

We’re getting there - you’re a legend @Vincent.


#11

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…


#12

Looking epic, it’s working significantly more smoothly which is great.

I still however cant figure out why each item-specific SVG isn’t being adopted using the Name SVG field in the custom code.

Any thoughts on this?


#13

I’m on the go right now, I can’t have another look before later later. Let me know if you fix this.


#14

Very much appreciated - looking to get this baby out into the world before the weekend and show people whatI’ve been up to these last few months.

Will update if I come across anything!


#15

Hey @vincent

I tried my hardest to find the root of the problem but I’m coming up blank - did you manage to have another look?

I’ve made a number of updates, here is the new link:

https://preview.webflow.com/preview/tjtj-design-2-0-d596c41e82b169597125616?utm_source=tjtj-design-2-0-d596c41e82b169597125616&preview=48fa9a00059d8342954a7cd07f1c51ea

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.

Any other Webflow Masters able to shed some light on the problem? @PixelGeek @samliew @cyberdave