Bootstrap masks

Use a mask to make your content more visible in the picture.


Patterns

no mask

Image of ballons flying over canyons with mask pattern one.

.pattern-1

.pattern-2

Image of ballons flying over canyons with mask pattern one.

.pattern-3

.pattern-4

Image of ballons flying over canyons with mask pattern one.

.pattern-5

.pattern-6

Image of ballons flying over canyons with mask pattern one.

.pattern-7

.pattern-8

Image of ballons flying over canyons with mask pattern one.

.pattern-9

Usage

Step 1: Create a wrapper with View component.

import { View } from 'mdbreact';
<View>
    [...]
</View>

Step 2: Set a path to the image. If you want to make your image responsive, remember to add a class .img-fluid.

<View>
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" className="img-fluid" alt=""/>
</View>

Step 3: Add a component Mask to cover the image with the pattern.

import { View, Mask } from 'mdbreact';
<View>
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" className="img-fluid" alt=""/>
    <Mask />
</View>

Step 4: Choose a pattern from the examples above.

<View>
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" className="img-fluid" alt="" />
    <Mask pattern={1} />

    </div>
</View>

Step 5: If you want to add some text, you can use a class .flex-center to center it, and .white-text to give your text a stronger contrast and make it more visible.

<View>
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" className="img-fluid" alt="" />
    <Mask pattern={1} className="flex-center">
        <p className="white-text">.pattern-1</p>
    </Mask>
</View>

Step 6: (optional) To add the well-known waves / ripple effect activated upon clicking on the image, simply pass a waves prop to the View component.

<View waves>
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" className="img-fluid" alt="" />
    <Mask pattern={1} className="flex-center">
        <p className="white-text">.pattern-1</p>
    </Mask>
</View>

Overlays

slight overlay

light overlay

strong overlay

Usage

Instruction and markup are the same like for the patterns. The only difference is you add an overlay (black-strong in the example below) to the Mask.

See the full list of the overlay colors and intensity

<View>
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" className="img-fluid" alt="" />
    <Mask overlay="black-strong" className="flex-center">
        <p className="white-text">strong overlay</p>
    </Mask>
</View>

Overlay colors and intensity

Choose one of the props from the list below to set a desired intensity and color of your mask.

blue-light

red-light

pink-light

purple-light

indigo-light

cyan-light

teal-light

green-light

lime-light

yellow-light

orange-light

brown-light

grey-light

blue-grey-light

black-light

stylish-light

white-light

blue-strong

red-strong

pink-strong

purple-strong

indigo-strong

cyan-strong

teal-strong

green-strong

lime-strong

yellow-strong

orange-strong

brown-strong

grey-strong

blue-grey-strong

black-strong

stylish-strong

white-strong

blue-slight

red-slight

pink-slight

purple-slight

indigo-slight

cyan-slight

teal-slight

green-slight

lime-slight

yellow-slight

orange-slight

brown-slight

grey-slight

blue-grey-slight

black-slight

stylish-slight

white-slight