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.
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.
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!
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.
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?
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.
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.
