lundi, mai 21, 2018
[stack_hero image= »38″]

Scrims & Overlays

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack’s modular elements
at the Element Index Page →

[/stack_hero]
[vc_section css= ».vc_custom_1498220957857{padding-top: 0px !important;} » ebor_docs= » »]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Overlays

Overlays are useful for ensuring that text overlaying an image will remain readable.

Elements using an image background can be overlayed with a tint by adding the data attribute data-overlay= »# ». The strength of the tint can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light tint, 9 being a heavy tint.

[/stack_boxed_content]
[stack_boxed_content padding= »boxed–lg » background= »imagebg » image= »227″]
Modern Aesthetic

Build a beautifully performant site with Stack’s vast collection of modular elements.

Build Now

[/stack_boxed_content]
[/vc_section][vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Scrims

Similar to overlays, scrims add a gradient tint to the bottom or top of an element to ensure that overlaying text remains readable — without tinting the entire image.

Elements using an image background can be scrimmed by adding the data attribute data-scrim-top= »# » or data-scrim-bottom= »# ». The strength of the scrim can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light ting, 9 being a heavy scrim.

[/stack_boxed_content]
[stack_boxed_content padding= »boxed–lg » background= »imagebg » image= »228″ scrim_top= »8″]
Modern Aesthetic

Build a beautifully performant site with Stack’s vast collection of modular elements.

Build Now

[/stack_boxed_content][stack_boxed_content padding= »boxed–lg » background= »imagebg » image= »228″ scrim_bottom= »9″]
Modern Aesthetic

Build a beautifully performant site with Stack’s vast collection of modular elements.

Build Now

[/stack_boxed_content]
[/vc_section]