Variable control for "Fill Darken" transparency

I really like the feature in Blocs to be able to add a semi-transparent “Fill Overlay” on top of an image. What I think would make it even more powerful is to provide a variable “intensity slider”. I often have to write CSS to override the standard settings of “dark” or “darker” to be able to control the amount of transparency.

Screenshot 2024-03-08 um 11.12.28

Hi Gary,

Why don’t just add the default classes to the Class Manager and adjust it in any way you want:

texture-darken::before
texture-darken-strong::before

Old video (still relevant) on this topic:

Cheers,
Eldar

3 Likes

Hi Eldar!

Thanks - that’s what I’ve been doing. I just thought it would be cool if this was integrated into Blocs as a new feature, instead of just “dark” or darker" …

Hi Gary,

I also use the new Bloc Masks feature for the similar effect. If you select Solid and change the class it creates, it’s pretty much anything you want it to be. You can even create multilayered gradients, etc.

Another reason I think this would be a good feature: If I add some code to change the amount of trasnparency of the overlay, there it is not shown in design view, which would be kind of nice.

/* projekt hero overlay */ .texture-darken::before { background: rgba(0, 52, 78, 0.40); }

Just change the opacity in the Class Editor? It is shown in design view as well.