I have text on a hero image that is somehow transparent now

Hey everyone,

I’m building out a site and trying to put text over a hero image on my landing page. Originally the text was white, with no transparency settings. After working on other parts of the scroll page, I came back to the landing page and found that my text is now transparent. Any ideas?

I’ve already checked the settings for the SC overlay, the text, the button, and the icons and none of them have any transparency options checked. I’d love to get some help from some pros! Thanks


Here’s my read-only:
https://preview.webflow.com/preview/shashitest?utm_medium=preview_link&utm_source=designer&utm_content=shashitest&preview=c65174aedc7834e3f636e3b8ac1524fd&workflow=preview

I should mention I’m designing a mobile web-site - nothing has been optimized for desktop yet, only mobile.

hi @ghostcaat semi-transparency is related to your animation you can check it by moving SC button around your timeline.

One more thing to save you time and headaches, I know that many developers (including me) start with mobile-first because of media queries but WF is different as design inherits from the parent. This means you should start with the base breakpoint * and adjust the design in smaller and/or larger viewports accordingly otherwise you will pull your hair and have nightmares if you will continue to do it the opposite way.

good luck

1 Like