Bootstrap masks

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

Patterns

Examples:


Image of ballons flying over canyons with no mask.

no mask

Image of ballons flying over canyons with mask pattern one.

.pattern-1


Image of ballons flying over canyons with mask pattern two.

.pattern-2

Image of ballons flying over canyons with mask pattern three.

.pattern-3


Image of ballons flying over canyons with mask pattern four.

.pattern-4

Image of ballons flying over canyons with mask pattern five.

.pattern-5


Image of ballons flying over canyons with mask pattern six.

.pattern-6

Image of ballons flying over canyons with mask pattern seven.

.pattern-7


Image of ballons flying over canyons with mask pattern eight.

.pattern-8

Image of ballons flying over canyons with mask pattern nine.

.pattern-9



Usage:


Step 1: Create a wrapper containing class .view.


<div class="view">
    [...]
</div>

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


<div class="view">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
</div>

Step 3: Add a class .mask to cover the image with the pattern.


<div class="view">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
    <div class="mask">
       
    </div>
</div>

Step 4: Choose a pattern class from the examples above.


<div class="view">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
    <div class="mask pattern-1">
       
    </div>
</div>

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.


<div class="view">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
    <div class="mask pattern-1 flex-center">
        <p class="white-text">.pattern-1</p>       
    </div>
</div>

Overlays

Examples:


Image of ballons flying over canyons with no overlay.

no overlay


Image of ballons flying over canyons with light overlay.

light overlay

Image of ballons flying over canyons with strong overlay.

strong overlay



Usage:


Instruction and markup are the same like for the patterns. The only difference is you add an overlay class (.hm-black-strong in the example below) to the .view, not .mask.

See the full list of the overlay colors and intensity


<div class="view hm-black-strong">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(28).jpg" class="img-fluid" alt="">
    <div class="mask flex-center">
        <p class="white-text">strong overlay</p>
    </div>
</div>

Overlay colors and intensity

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


.hm-blue-light

.hm-red-light

.hm-pink-light

.hm-purple-light

.hm-indigo-light

.hm-cyan-light

.hm-teal-light

.hm-green-light

.hm-lime-light

.hm-yellow-light

.hm-orange-light

.hm-brown-light

.hm-grey-light

.hm-bluegrey-light

.hm-black-light

.hm-stylish-light

.hm-white-light

.hm-blue-strong

.hm-red-strong

.hm-pink-strong

.hm-purple-strong

.hm-indigo-strong

.hm-cyan-strong

.hm-teal-strong

.hm-green-strong

.hm-lime-strong

.hm-yellow-strong

.hm-orange-strong

.hm-brown-strong

.hm-grey-strong

.hm-bluegrey-strong

.hm-black-strong

.hm-stylish-strong

.hm-white-strong

.hm-blue-slight

.hm-red-slight

.hm-pink-slight

.hm-purple-slight

.hm-indigo-slight

.hm-cyan-slight

.hm-teal-slight

.hm-green-slight

.hm-lime-slight

.hm-yellow-slight

.hm-orange-slight

.hm-brown-slight

.hm-grey-slight

.hm-bluegrey-slight

.hm-black-slight

.hm-stylish-slight

.hm-white-slight