Tailwind CSS React Mask

Responsive mask built with Tailwind CSS. Masks are used to make content more visible by providing a proper contrast. Download for free without registration.

Basic example

Use code below to add mask on top of image to provide contrast a proper contrast.

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div
          className="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
          <img
            src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
            className="max-w-xs" />
          <div
            className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
        </div>
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Color

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

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div>
            <div className="grid grid-cols-3 gap-4">
              <div className="mb-4">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-indigo-700 bg-fixed opacity-50"></div>
                </div>
              </div>
              <div className="mb-4">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-purple-700 bg-fixed opacity-50"></div>
                </div>
              </div>
              <div className="mb-4">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-green-700 bg-fixed opacity-50"></div>
                </div>
              </div>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div className="mb-4 md:mb-0">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-red-700 bg-fixed opacity-50"></div>
                </div>
              </div>
              <div className="mb-4 md:mb-0">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-white bg-fixed opacity-50"></div>
                </div>
              </div>
              <div className="mb-4 md:mb-0">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-blue-300 bg-fixed opacity-50"></div>
                </div>
              </div>
            </div>
          </div>
        );
      }

Gradient

You can even use a fancy gradient as a mask.

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div
          className="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
          <img
            src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
            className="max-w-xs" />
          <div
            className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-70"></div>
        </div>
        );
      }

Opacity

By changing the class you can manipulate the opacity of the mask.

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div>
            <div className="grid grid-cols-3 gap-4">
              <div className="mb-4">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-10"></div>
                </div>
              </div>
              <div className="mb-4">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-30"></div>
                </div>
              </div>
              <div className="mb-4">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
                </div>
              </div>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div className="mb-4 md:mb-0">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-70"></div>
                </div>
              </div>
              <div className="mb-4 md:mb-0">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-80"></div>
                </div>
              </div>
              <div className="mb-4 md:mb-0">
                <div
                  className="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-90"></div>
                </div>
              </div>
            </div>
          </div>
        );
      }

Content

The main purpose of the mask is to provide an appropriate contrast between the image and its content. The most common use of masks is to put text on an image.

Can you see me?

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div
          className="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
          <img
            src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
            className="max-w-xs" />
          <div
            className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed bg-black opacity-50">
            <div className="flex h-full items-center justify-center">
              <p className="text-white opacity-100">Can you see me?</p>
            </div>
          </div>
        </div>
        );
      }

Ripple

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

        
            
      import React from 'react';
      import { TERipple } from 'tw-elements-react';
      
      export default function MaskWithRippleExample(): JSX.Element {
        return (
            <div className="grid grid-cols-2 gap-4">
              <div>
                <TERipple>
                <div
                  className="relative w-full overflow-hidden bg-cover bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed bg-white opacity-50"></div>
                </div>
                </TERipple>
              </div>
              <div>
                <TERipple>
                <div
                  className="relative w-full overflow-hidden bg-cover bg-no-repeat">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                    className="w-full" />
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed bg-black opacity-50"></div>
                </div>
                </TERipple>
              </div>
            </div>
        );
      }

Link regular

Wrap a mask to change the image into a clickable link.

Use regular link to get image with ripple without additional effect.

        
            
      import React from 'react';
  
      export default function App() {
        return (
          <div
          className="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
          <img
            src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
            className="max-w-xs" />
          <div
            className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed bg-black opacity-50">
            <div className="flex h-full items-center justify-center">
              <p className="text-white opacity-100">Can you see me?</p>
            </div>
          </div>
        </div>
        );
      }

Link with ripple

Wrap the element inside the TERipple component to achieve an additional ripple effect.

        
            
      import React from 'react';
      import { TERipple } from 'tw-elements-react';
      
      export default function MaskWithRippleAndLinkExample(): JSX.Element {
        return (
          <div className="flex justify-center space-x-2">
            <TERipple>
              <div
                className="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
                <img
                  src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
                  className="max-w-xs" />
                <a href="#!">
                  <div
                    className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-neutral-200 bg-fixed opacity-60"></div>
                </a>
              </div>
            </TERipple>
          </div>
        );
      }

If you are looking for more advanced options, try Bootstrap Masks from MDBootstrap.

Mask