CSS allows for a lot of cool effects and transitions that liven up the websites and/or web applications we build today. Compared to when I first got started in the industry, it’s honesty like comparing a Honda Accord from the 80s to today(2020s). In this article, we’ll be going over one of those cool features. This is mask image.
This CSS property allows you to apply a mask overlay to an element, utilizing the alpha channel of the mask image. It’s pretty cool and allows for some good design opportunities for those of you that are pretty creative. But enough talk, let’s look at some code!
.Element {
width: 200px;
height: 200px;
background-image: url("http://test.com/test.jpg");
mask-image: url("http://test.com/test.svg");
mask-size: 100%;
mask-repeat: none;
}