Help recreating text box over image

Design help General
1

Hi everyone,

New to Webflow and so far it’s been tricky but I’m getting there… However I was hoping if you’d be able to help me recreate this effect found on [https://eatnuggs.com/](http://Eat nuggs).

Capture
Capture1013×650 75 KB

So the text box overlaying an image, hopefully makes sense!

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

2

Hey @mrben,

This is very simple, just add negative 50px to the right margin of the div block. Remember, padding is within the div block, margin is outside of the div block.

Hope this helps!

Naweed

1 Like
3

Or if you want to know how it was done on the page you have showed as an example - image was set to absolute with right:0 positioning, then aligned vertically within the container that both items (txt block and image) are in.

1 Like
4

Thanks for the help guys, appreciate it.

So I’ve followed the advice and I’m currently at a stage where my container doesn’t sit in the middle of the page, and also my text box runs behind the image, however I moved it’s stacking order to be above the image but that hasn’t made a difference?

My project is below if someone would be kind enough to point me in the right direction. Currently I’m just trying to mimic the eggnug design to be able to use that understanding for my own projects.

Link

5
  • your container needs to have relative position, and flex property of justify:center set
  • your div block with the text needs to have relative position with z-index raised to 1 to be over the image
1 Like
6

Brilliant that solved it, thank you for your help! :heart:

1 Like