Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

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 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>

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 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>

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