When I add a filter to my background image the text on top is changed. How can I add a filter but not have it affect the text?

I have seen only a couple of posts about this but with no real answer. Any help will be great. Thanks.

I have a section with a background from my collections.
I also have a DIV which has 2 text block.
When I use a filter to change the brightness of the background it also changes the text.

I have tried adding a DIV and applying a background to that, however, I’m still having the same issue.

I know there is something simple I am doing wrong and I’m struggling to find a step by step solution.

I have attached the link

The problem section is where it says Next Case Study Mosaic Holdings, you can see that the brightness is affecting both the text and background.


Welcome to the forum :wave:

I would highly recommend you share your project’s read-only link, and provide a bit more detail (such as exactly which element this is affecting) in order for someone to help you.

Hi Andy, thanks for the heads up. I have now edited the original post.

1 Like

Ok, so this is weird. Think there might be some sort of weirdness going on with shared projects - I can’t seem to set a background overlay using your share link.

Nevermind, I’ll explain as best I can using one of my projects as an example!

So I’ve achieved what you’re trying to achieve in the screenshot below:

What I’ve done is apply an overlay on top of the background image, which you can see on the right hand side.

What you’ve done is apply a Brightness % to the section, which seems to have muted EVERYTHING.

So, clear out the brightness/opacity styling, and create a semi-transparent overlay, in much the same way you applied a background image. Let me know if that makes sense / if that works for you!

I appreciate you coming to me with a speedy response.

I have done as you say however I cannot get the overlay to be applied to the background image from the collection.


When the background is set from the backgrounds section and applied from my assets, the overlay seems to work.

Does this mean I cannot add an overlay to a collection background image?

You’re very welcome!

Ahh, sorry I missed that it was set from a collection.

So because you’ve set the background image as a collection item, I don’t think you can set an overlay as well. See this Webflow University article on the topic (see the warning in red, just below the section I linked you to).

Might be a case of editing the image in PS or GIMP before uploading it to the Collection.

This would make sense. I’ve been messing about trying different things but the problem wasn’t something I could see. Even though it’s a shame I can’t add an overlay to the collection image background I’m relieved to have an answer on the matter.

Also, I suppose I didn’t take into account that I could just use PS to add the chosen filters.

Thanks for your help Andy.

No problem at all. I just tried it in my own project, creating a BG Colour (70% transparency) but I can only set that as background colour, not overlay colour unfortunately.

Just thought of another things that may to be able to be applied to the collections images.

Am i right in thinking that if I set a hover over the collection image background, I will not be able to have a lowered brightness upon the hover? or as a whole, any hover states?

Ok I think I have a solution. 2 secs while I verbalise it…

Done! The only downside to this is that you won’t be able to control the opacity of the overlay dynamically (i.e. “per CMS item”) - you will need to decide what opacity you want for ALL instances of this.

Create a child div of your section (I called it overlayDiv). Set your Div Block 8 as a child of overlayDiv, per the image above.

Flex your section:


Stretch the overlayDiv:


Apply an overlay with your desired opacity to the background of overlayDiv (70% in this example):


And that should be it! So in this example, I would always be using an opacity of 70% for all Items, no matter what BG image is dynamically linked. Just something to consider.

What an explanation that is! Yeah that has worked a treat.

Yes, the thing to keep in mind is I will have the same opacity across all images. The whole idea was to have the background image darker and then on hover it would brighten up a little.

Oh, that’s super easy, I just did that in ten seconds after reading your comment.

Follow the guide above. Then simply edit the Hover state of overlayDiv, adjusting the opacity as required.

Voilá! :slight_smile:

How did you get on, @shaungibson99?

Hi Andy, thanks for checking in.

I was able to follow your instructions and set up the overlay, I was then able to set a hover state. Who whole thing took minutes to do, but figuring it out felt like a lifetime.

I know i will be utilising this forum a lot more in the future. Thanks again for your help Andy.

1 Like

Awesome! Glad you got it sorted. Look forward to seeing the finished project :slight_smile:

See you around bud!