Color Overlay over CMS Image

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.

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:


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.


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

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

And then add a text block inside it


Really helpful, thanks a lot @donaldsv!

1 Like

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