Image Masks

The mask class is applied to the parent figure element.

These demos use a 1:1, 2:1 and 2:3 ratios but masks will stretch to cover any ratio.

Modifier classes - img-mask--tall and img-mask--wide - are applied/removed automatically by javascript. Alternative mask images can be used for these variants.

Misc

.img-mask--oval

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--rough

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--wavy

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--wavy-rounded

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

Blobs

.img-mask--blob-1

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--blob-2

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--blob-3

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--blob-4

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--blob-5

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--blob-6

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

Splats

.img-mask--splat-1

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--splat-2

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--splat-3

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.img-mask--splat-4

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

Rounded Corners

(The 'sm', 'md' and 'lg' border-radius sizes are set with brand sass variables).

.rounded-corner-sm

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.rounded-corner-md

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here

.rounded-corner-lg

Figure

title goes here

Lightbox Figure

title goes here

Lightbox Figure - show caption

title goes here
title goes here