Masks

React Bootstrap 5 Masks component

Masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible by providing a proper contrast. They are most often used on images.

Without mask

Sample

Can you see me?

With mask

Sample

Can you see me?

Basic example

A simple example of mask usage.

        
            
            import React from 'react';

            export default function App() {
              return (
                <div className='bg-image'>
                  <img src='https://mdbootstrap.com/img/new/standard/city/053.webp' className='w-100' />
                  <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}></div>
                </div>
              );
            }

How it works

A detailed explanation of how the masks work in MDB:

  • Masks require .bg-image wrapper which sets a position to relative, overflow to hidden, and properly center the image.
  • The inside .bg-image wrapper as the first child we place an img element with the source link
  • Below is the actual mask. We set a color and opacity via rgba code and inline CSS. In the section, you will find a detailed explanation of how RGBA colors work with masks
  • If you want to put a text on the image you have to place it within the .mask wrapper. To center it you have to use flex utilities (explained in the section below).

RGBA

By manipulating RGBA code you can change the color and opacity of the mask.

Color

rgba(18, 102, 241, 0.6)
rgba(178, 60, 253, 0.6)
rgba(0, 183, 74, 0.6)
rgba(249, 49, 84, 0.6)
rgba(251, 251, 251, 0.6)
rgba(57, 192, 237, 0.6)

You can even set a fancy gradient as a mask.

rgba(57, 192, 237, 0.6) 
        
            
              import React from 'react';

              export default function App() {
                return (
                  <div>
                    rgba(57, 192, 237, 0.6)
                    <div className='bg-image'>
                      <img src='https://mdbootstrap.com/img/new/standard/city/053.webp' className='w-100' />
                      <div
                        className='mask'
                        style={{
                          background: 'linear-gradient(45deg, rgba(29, 236, 197, 0.7), rgba(91, 14, 214, 0.7) 100%)',
                        }}
                      ></div>
                    </div>
                  </div>
                );
              }

Opacity

By changing the last value in the RGBA color you can manipulate the opacity of the mask.

0.0 means fully transparent and 1.0 fully opaque. You can set any value between 0.0 and 1.0.

rgba(0, 0, 0, 0.0) - fully transparent

rgba(0, 0, 0, 1.0) - fully opaque

0.1
0.3
0.55
0.7
0.8
0.9

Content

The main goal of the masks is to provide a proper contrast between the image and the content placed on it. Most commonly we put a text on the images with masks.

Within .mask wrapper place a div and apply flexbox utilities to center the content vertically and horizontally. Then put the text inside.

Sample

Can you see me?

        
            
            import React from 'react';

            export default function App() {
              return (
                <div className='bg-image'>
                  <img src='https://mdbootstrap.com/img/new/standard/city/053.webp' className='w-100' alt='Sample' />
                  <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
                    <div className='d-flex justify-content-center align-items-center h-100'>
                      <p className='text-white mb-0'>Can you see me?</p>
                    </div>
                  </div>
                </div>
              );
            }

Ripple

You can easily add a ripple effect to the image with a mask.

Simply add MDBRipple component with the .bg-image class.

        
            
            import React from 'react';
            import { MDBRipple } from 'mdb-react-ui-kit';

            export default function App() {
              return (
                <>
                  <MDBRipple rippleTag='div' className='bg-image'>
                    <img src='https://mdbootstrap.com/img/new/standard/city/053.webp' className='w-100' />
                    <div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.6)' }}></div>
                  </MDBRipple>
                  <MDBRipple rippleTag='div' rippleColor='light' className='bg-image'>
                    <img src='https://mdbootstrap.com/img/new/standard/city/053.webp' className='w-100' />
                    <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}></div>
                  </MDBRipple>
                </>
              );
            }

Gradient

These are linear, gradient masks (a variation of our standard masks) that allow you to darken the background around the text in an image, but do not cover the entire image, and therefore partially retain its natural colors.

Alternative text

Can you see me?

Alternative text

Can you see me?

Alternative text

Can you see me?

        
            
        import React from 'react'

        export default function App() {
          return (
            <div className='row'>
              <div className='col-lg-4 col-md-12 mb-4 mb-lg-0'>
                <div className='bg-image rounded-6'>
                  <img
                    src='https://mdbootstrap.com/img/new/ecommerce/vertical/010.jpg'
                    className='w-100'
                    alt='Alternative text'
                  />
                  <div className='mask'>
                    <div className='bottom-0 d-flex align-items-end h-100 text-center justify-content-center'>
                      <div>
                        <h2 className='fw-bold text-white mb-4'>Can you see me?</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className='col-lg-4 mb-4 mb-lg-0'>
                <div className='bg-image rounded-6'>
                  <img
                    src='https://mdbootstrap.com/img/new/ecommerce/vertical/010.jpg'
                    className='w-100'
                    alt='Alternative text'
                  />
                  <div
                    className='mask'
                    style={{
                      background: 'linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, 0.5))',
                    }}>
                    <div className='bottom-0 d-flex align-items-end h-100 text-center justify-content-center'>
                      <div>
                        <h2 className='fw-bold text-white mb-4'>Can you see me?</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        
              <div className='col-lg-4 mb-4 mb-lg-0'>
                <div className='bg-image rounded-6'>
                  <img
                    src='https://mdbootstrap.com/img/new/ecommerce/vertical/010.jpg'
                    className='w-100'
                    alt='Alternative text'
                  />
                  <div
                    className='mask'
                    style={{
                      background: 'linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(263, 80%, 20%, 0.5))',
                    }}>
                    <div className='bottom-0 d-flex align-items-end h-100 text-center justify-content-center'>
                      <div>
                        <h2 className='fw-bold text-white mb-4'>Can you see me?</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )
        }