Streaming live at 10am (PST)

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


#1

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)


#2

nobody? Am I the first one to need this?


#3

Hey @Heinrich_Held,

You can try something similar to this https://webflow.com/blog/how-to-create-a-thumbnail-overlay

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 :slight_smile:

Best,
Naweed


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.