Svelte Bootstrap Mask

Svelte Mask - Bootstrap 4 & Material Design

Svelte 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

Strong overlay

<script>

  import { MDBMask, MDBView, MDBContainer } from "mdbsvelte";
</script>
<MDBContainer class="mt-5">
  <MDBView>
    <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." />
    <MDBMask class="flex-center" pattern={8} overlay="red-strong" >
      <p class="white-text">Strong overlay</p>
    </MDBMask>
  </MDBView>
</MDBContainer>

Overlay

text

<script>

  import { MDBMask, MDBView, MDBContainer } from "mdbsvelte";
</script>
<MDBContainer class="mt-5">
  <MDBView>
    <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="sample image" />
    <MDBMask class="flex-center" overlay="green-strong" >
      <p class="white-text">text</p>
    </MDBMask>
  </MDBView>
</MDBContainer>

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 component <MDBView>.

Step 2: Set a path to the image by adding src attribute.

Step 3: Add a component <MDBMask> to cover the image with the pattern.

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

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

Types of Overlays

slight overlay

light overlay

strong overlay

<script>

  import {MDBMask, MDBView, MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>
<MDBRow>
  <MDBCol md="12" class="p-4">
    <MDBView>
      <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" class="img-fluid" alt="sample image" />
      <MDBMask class="flex-center" overlay="teal-slight" >
        <h2 class="white-text">slight overlay</h2>
      </MDBMask>
    </MDBView>
  </MDBCol>
  <MDBCol md="6" class="p-4">
    <MDBView>
      <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" class="img-fluid" alt="sample image" />
      <MDBMask class="flex-center" overlay="teal-light" >
        <p class="white-text">light overlay</p>
      </MDBMask>
    </MDBView>
  </MDBCol>
  <MDBCol md="6" class="p-4">
    <MDBView>
      <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" class="img-fluid" alt="sample image" />
      <MDBMask class="flex-center" overlay="teal-strong" >
        <p class="white-text">strong overlay</p>
      </MDBMask>
    </MDBView>
  </MDBCol>
</MDBRow>

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

No Preview