Image with Color Overlays

This block allows you to add images and set an color overlay to manipulate the appearance of the photo. A color overlay does not have to be set, and this block type may want to be used for full color images as well to create sizing consistencies throughout the site. The Height field in the inspector allows setting one of three predefined heights for the image. The Image Color field in the inspector sets the overlay color, while the Blend Mode dropdown allows you to choose from different color blending options—Soft Overlay will be the most widely used, but it's worth changing the dropbox and seeing the result of other blend modes because each image may have its own optimal blend mode selection.

Default height:

Compact height:

Expanded height: