Bootstrap masks

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/Others/nature-sm.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/Others/nature-sm.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/Others/nature-sm.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/Others/nature-sm.jpg" class="img-fluid" alt="">
    <div class="mask pattern-1 flex-center">
        <p class="white-text">.pattern-1</p>       
    </div>
</div>

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/Others/nature-sm.jpg" class="img-fluid" alt="">
    <div class="mask flex-center">
        <p class="white-text">strong overlay</p>
    </div>
</div>