Color Overlay over CMS Image

Design help General
1

Is it possible to add a transparant black color overlay to an CMS image?
I only see the option to change the opacity, but I like to make the image black instead of white.

https://preview.webflow.com/preview/face-bvba?preview=6268a0c0259a836ae12f43798f16b6e3

2

Hey @Gerry_Van_Leemput!

Good question! Of course it’s possible! If you don’t want the overlay to be interactive on mouse over, here’s the workaround:

First, you’ll need to create 2 div block an place them like so:

Then, you have to set the Div Block 1 position to relative and the Div Block 2 position to absolute and Full

After that you can apply your background color on the Div Block 2 and here’s the result:

If you want a mouse over interaction on the overlay, you will have to set the interaction on Div Block 2.

Hope that helps! :slight_smile:

3 Likes
3

Also, just on a related note, you can set a ‘color’ field in the CMS and use that to set certain colours in your designs/collection lists/templates.

2 Likes
4

Thanks, that indeed worked like a charm. But now, is it still possible to place text over it and center it to the middle? I’m trying something on the divisions template at the events section… A Flex box don’t seem to work

5

You can add a flex box setting to the Div Block 2

And then add a text block inside it

3 Likes
6

Really helpful, thanks a lot @donaldsv!

1 Like
7

CMS LIST
(+) Div Block → Absolute Position → 0/0/0/0 Padding → -3 Index.
(+)Everything Else CMS