Vue Bootstrap Masks

Vue Masks - Bootstrap 4 & Material Design

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.

pattern = 8


            <template>
              <mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).jpg" alt="Image of ballons flying over canyons with mask pattern one">
                <mdb-mask pattern="8" text="pattern = 8" />
              </mdb-view>
            </template>
          

            <script>
              import { mdbView, mdbMask } from "mdbvue";
              export default {
                name: "MaskPage",
                components: {
                  mdbView,
                  mdbMask
                }
              }
            </script>
          

Overlay

smaple image

strong overlay


            <template>
              <mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).jpg" alt="Sample image">
                <mdb-mask overlay="green-strong" text="strong overlay" />
              </mdb-view>
            </template>
          

            <script>
              import { mdbView, mdbMask } from "mdbvue";
              export default {
                name: "MaskPage",
                components: {
                  mdbView,
                  mdbMask
                }
              }
            </script>
          

Patterns

smaple image

no mask

Image of ballons flying over canyons with mask pattern one.

pattern = 1

smaple image

pattern = 2

Image of ballons flying over canyons with mask pattern one.

pattern = 3

smaple image

pattern = 4

Image of ballons flying over canyons with mask pattern one.

pattern = 5

smaple image

pattern = 6

Image of ballons flying over canyons with mask pattern one.

pattern = 7

smaple image

pattern = 8

Image of ballons flying over canyons with mask pattern one.

pattern = 9

Usage

Step 1: Create a wrapper containing component mdb-view.


        <template>
          <mdb-view>
            [...]
          </mdb-view>
        </template>
      

        <script>
          import { mdbView } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView
            }
          }
        </script>
      

Step 2: Set a path to the image.


        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
            [...]
          </mdb-view>
        </template>
      

        <script>
          import { mdbView } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView
            }
          }
        </script>
      

Step 3: Add a component mdb-mask to cover the image with the pattern.


        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
            <mdb-mask />
          </mdb-view>
        </template>
      

        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>
      

Step 4: Choose a pattern prop from the examples above.


        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
            <mdb-mask pattern="1" />
          </mdb-view>
        </template>
      

        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>
      

Step 5: If you want to add some text, you can use a prop flex-center to center it.


        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
            <mdb-mask pattern="1" flex-center text="pattern=1" />
          </mdb-view>
        </template>
      

        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>
      

Overlays

smaple image

slight overlay

smaple image

light overlay

smaple image

strong overlay

Usage

Instruction and markup are the same like for the patterns. It means you add an overlay prop (black-strong in the example below) to the mdb-mask.

See the full list of the overlay colors and intensity


        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
            <mdb-mask flex-center overlay="black-strong" text="strong overlay" />
          </mdb-view>
        </template>
      

        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>
      

Overlay colors and intensity

Choose one of the overlay props from the list below to set a desired intensity and color of your mask.

blue-light

red-light

pink-light

purple-light

indigo-light

cyan-light

teal-light

green-light

lime-light

yellow-light

orange-light

brown-light

grey-light

blue-grey-light

black-light

stylish-light

white-light

blue-strong

red-strong

pink-strong

purple-strong

indigo-strong

cyan-strong

teal-strong

green-strong

lime-strong

yellow-strong

orange-strong

brown-strong

grey-strong

blue-grey-strong

black-strong

stylish-strong

white-strong

blue-slight

red-slight

pink-slight

purple-slight

indigo-slight

cyan-slight

teal-slight

green-slight

lime-slight

yellow-slight

orange-slight

brown-slight

grey-slight

blue-grey-slight

black-slight

stylish-slight

white-slight


Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143