Bootstrap masks
Bootstrap masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible in the picture.
Patterns
no mask
.pattern-1
.pattern-2
.pattern-3
.pattern-4
.pattern-5
.pattern-6
.pattern-7
.pattern-8
.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