Mask

Bootstrap Masks alter the visibility of an element by either partially or fully hiding it. Contrast Design Masks are used to make content more visible in the picture.

Mask Patterns

html

            <div class="view">
                <img src="../img/food.jpg">
                <div class="mask pattern-1"></div>
            </div>
            <div class="view">
                <img src="../img/food.jpg">
                <div class="mask pattern-2"></div>
            </div>
            <div class="view">
                <img src="../img/food.jpg">
                <div class="mask pattern-3"></div>
            </div>
            <div class="view">
                <img src="../img/food.jpg">
                <div class="mask pattern-4"></div>
            </div>

Mask Light Overlay

html

            <div class="view">
                <img src="../img/food.jpg">
                <div class="mask rgba-blue3-light"></div>
            </div>

Mask Strong Overlay

html

            <div class="view">
                <img src="../img/food.jpg">
                <div class="mask rgba-blue-strong"></div>
            </div>

Forms

Card