Bootstrap masks
Use a mask to make your content more visible in the picture.
Patterns
Examples:
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/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:
no 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/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