[SOLVED] How to build half of the text white and half transparent?

Design help General
1

Hi!
I have a question regarding how to build text that is half over the image. The text that is over the image is transparent and that touches background is white.

Any ideas?

Screen Shot 2019-12-14 at 7.01.44 PM
Screen Shot 2019-12-14 at 7.01.44 PM802×440 147 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I gave this a try as I’m thinking it can be done.

I am thinking to use three or more elements and the z-index.

I got it to almost work save for the hollow text. This appears can’t be done. I got frustrated at that point and quit.

try

div
div
text
div
text
and z in layers then push the text up and down.

Also, try parallax.

3

You have to add embedded code behind the body

<body> 
   <style>
	.webkit {
    color: transparent;
    -webkit-text-stroke: 1px white;
  }
 </style>

than you just find the style and add it to the text. Of course you have to add non-transparent text behind the image.

Now I will make it ove up and down. That will be fun

4

Looks easier than what I was trying!

Thanks for sharing