Angular Bootstrap Masks
Angular masks - Bootstrap 4 & Material Design
Angular 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.
Pattern
![Image of ballons flying over canyons with mask pattern one.](https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).jpg)
.pattern-8
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
<div class="mask pattern-8 flex-center">
<p class="white-text">.pattern-8</p>
</div>
</div>
Overlay
![smaple image](https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (121).jpg)
strong overlay
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (121).jpg" class="img-fluid" alt="smaple image">
<div class="mask flex-center rgba-green-strong">
<p class="white-text">strong overlay</p>
</div>
</div>
Patterns
![smaple image](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
no mask
![Image of ballons flying over canyons with mask pattern one.](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-1
![smaple image](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-2
![Image of ballons flying over canyons with mask pattern one.](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-3
![smaple image](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-4
![Image of ballons flying over canyons with mask pattern one.](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-5
![smaple image](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-6
![Image of ballons flying over canyons with mask pattern one.](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-7
![smaple image](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.pattern-8
![Image of ballons flying over canyons with mask pattern one.](https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg)
.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
![smaple image](https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg)
slight overlay
![smaple image](https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg)
light overlay
![smaple image](https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg)
strong overlay
Usage
Instruction and markup are the same like for the patterns. It means you add an overlay class (.rgba-black-strong
in the example below) to the .mask
.
See the full list of the overlay colors and intensity
<div class="view">
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="">
<div class="mask flex-center rgba-black-strong">
<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.
.rgba-blue-light
.rgba-red-light
.rgba-pink-light
.rgba-purple-light
.rgba-indigo-light
.rgba-cyan-light
.rgba-teal-light
.rgba-green-light
.rgba-lime-light
.rgba-yellow-light
.rgba-orange-light
.rgba-brown-light
.rgba-grey-light
.rgba-blue-grey-light
.rgba-black-light
.rgba-stylish-light
.rgba-white-light
.rgba-blue-strong
.rgba-red-strong
.rgba-pink-strong
.rgba-purple-strong
.rgba-indigo-strong
.rgba-cyan-strong
.rgba-teal-strong
.rgba-green-strong
.rgba-lime-strong
.rgba-yellow-strong
.rgba-orange-strong
.rgba-brown-strong
.rgba-grey-strong
.rgba-blue-grey-strong
.rgba-black-strong
.rgba-stylish-strong
.rgba-white-strong
.rgba-blue-slight
.rgba-red-slight
.rgba-pink-slight
.rgba-purple-slight
.rgba-indigo-slight
.rgba-cyan-slight
.rgba-teal-slight
.rgba-green-slight
.rgba-lime-slight
.rgba-yellow-slight
.rgba-orange-slight
.rgba-brown-slight
.rgba-grey-slight
.rgba-blue-grey-slight
.rgba-black-slight
.rgba-stylish-slight
.rgba-white-slight
Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/angular/7.1.0/index.php on line 143