search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Mask

    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.

    • JSX
            
                
          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.

    • JSX
            
                
          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.

    • JSX
            
                
          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.

    • JSX
            
                
          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?

    • JSX
            
                
          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.

    Loading...
    • JSX
            
                
          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.

    • JSX
            
                
          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.

    Loading...
    • JSX
            
                
          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>
            );
          }
          
          
            
        

    Related resources

    Bootstrap Gallery Bootstrap Carousel Slider with Thumbnails Testimonials / Reviews How To Center Image How to make image responsive in Bootstrap Hover effect Gallery

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

    • Basic example
    • Color
    • Gradient
    • Opacity
    • Content
    • Ripple
    • Link regular
    • Link with ripple
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com