Add gradient overlay over an image (without having the img as a backroung)

[Heinrich_Held]

Hi there,

to see what I mean, see the screenshot below.

What is the “right” way to do this?

I know this can be done by setting the image as a background and adding an overlay, but I need to make it work with a normal img (all sites I’ve seen this effect on don’t use the image as a background).

Thanks!

---

Here is my public share link: LINK
(how to access public share link)

[Heinrich_Held]

nobody? Am I the first one to need this?

[nwdsha (Naweed)]

Hey @Heinrich_Held,

You can try something similar to this Create an animated text overlay on an image on hover | Webflow Blog

Instead of setting a bg image, add an image block > then add a div block (set to position relative) > finally add a text block inside this div with position absolute full.

You can then style the div block with your gradient color.

Hope this helps

Best,
Naweed