Cover Half of Hero Image

Hi guys,
I want my hero image like on website: where half of it is covered. I know how to put text on it, but I am not sure how to cover half of the image. Anybody can help please? Thanks

Check out this codepen:

If you are still having trouble implementing what @Implaier suggested, post a link to your current code, so we can give you some hints.

Ok. Thank you. I am a complete beginner. I will keep trying. Thank you so much!