 Maybe you have a background image that it doesn't really look great, but it would be really cool if you could just fade it out a little bit. Or you have a nice big image next to some text, but it's missing some pizzazz, something to make it a little bit more interesting, and you'd love to give it an interesting shape. The last thing you want to do, though, is to go into some image editing software to be able to do something like this. And luckily, because it's really easy to do, if you want to change the shape, it just takes a couple of seconds and you can switch it to whatever you want it to be. And why don't we do that by jumping right into the code and getting started with this with this first example that we have right here. And you'll notice I do have my H1 here, my really interesting title. And then we have an image that is underneath that, and it is an image and not a background image. And the reason for that is we're going to be using the mask image property to do the magic that we're going to be doing in this video. And as you can tell, I have styled my heading a little bit here. So if we jump over to my CSS, you'll notice that there is some styling here, but it's really nothing too fancy. Now let's not worry about the positioning of stuff yet. We'll get the mask on the image first, and then we're going to worry about how we can get it to go behind the text. So the property that we're going to be using is called mask image. And mask image is a lot like your background image in that you can pass it a URL and give it an actual image. And we're going to look at that for those like paint blobbies and different shapes that we can do. But just like a background image, you can also give it a linear gradient. Now, if I did something like red, blue, it's not actually going to do anything. And actually, because we are in Chrome here and I'm not running anything with auto prefixer, it's not going to do anything anyway, because we do need to actually prefix this still for chromium. But we can see that nothing is happening with my red and blue there. So what we'll do is we're actually going to select this, and I'm just going to push command D on my keyboard, which will select the same thing in both places. And what I'm going to do is black comma transparent. So now we have a gradient that's going from black to transparent. And you can see that actually did impact my image and my image is now fading away. Now the way mask image works is based on alpha channel. So you do have to play with your alpha value and alpha value of zero means it's faded to nothing. And if it has a full alpha like black does, then it's going to be completely there. So like I could replace both of these with red and it wouldn't actually change anything. Part of the spec does let you actually change it from being an alpha to luminance, but that is also not supported in Chrome. So we can't play around with that yet unless you really don't worry about browser support. And based on the comments of my videos, when I do talk about things where browser support isn't perfect, you guys really do care about browser support. Now there are different ways we could stack things. You could use grid in this case because I want my image to be outside of the container. I'm going to use position absolute. So because I know my image is going to be position absolute, I want to make sure that I have a position relative on my dot hero so that when I do it, everything is contained within this area and my hero is my containing block. Then on the image itself, we can position it and it sort of works, but you can see things are a little bit broken. To help fix this, we can give it a width and a height, but that of course stretches my image. So we can add the object fit of cover to make sure that it actually fits in that space properly. Now one issue is the text has gotten kind of funky and that's because the image is actually on top of my text. So I have two different choices. We could go back to my HTML and switch the order of them. So the text is now on top of the image or going back to the CSS, you could give a position of relative and a Z index to your text to pull it in front of the image that was position absolute. So one way we could improve upon that is by actually providing different alpha values as we go along. So you're starting at 100%, you're dropping to 30, and then you're moving down to zero. Or we could keep the middle value at 50% but use a gradient stop. So here I could say it's actually at 30% and I can move where that 50% is. If I want to be further down, I could put it to 70% and pull it down. We could change that over to a 10% and start it up really high. And of course you could even start it at below zero for your first stop if you'd want as well. I think it looks good like this. So I'm gonna leave it just like that. Make sure your text does stay readable. And then let's jump on over to example two where we want to do something more interesting with this image. Once again, we just have a regular image there. In this case it has the class of hero image on it. And what we can do here is you just basically need to find an SVG and you can just Google up your SVGs for like the shape you want. Just make sure that they're like public domain or they have no copyright on them or whatever. So you can grab the SVGs that you want and you should be able to use these types of SVGs as these different masks. So here let's just do the webkit version of this and then we'll duplicate it after. And there are a few other things that we will have to do to get this to work as well. Because when we do the mask image like this and this time instead of a linear gradient we will give it a URL just like a background image. Now I have an SVG called paintmask.svg. I've put that on there and you can see it's a little bit problematic because my SVG is actually too big. Luckily we do have mask size and you can do cover on this though it's not gonna quite work or look it actually did work in this situation but it is possible this ends up cropping your image the same way that a background size cover can crop your image a little bit or an object fit can crop your image. And I'm just gonna change the size of my container here so we can actually see what's going to be happening. Now it's a little bit hard to tell but if you look at the bottom here it is actually repeating itself and let's just come on here and actually say that the height is going to be 100 BH and there we go. We can see now that by doing that you can see the image is actually repeating itself or actually what I should be saying is my very large image now has the mask repeating itself. So just like background images we do have our image mask repeat and we can say no repeat on that and now it no longer repeats itself even though my image is really big and of course you could even come on here and do a webkit mask position so I could say center and center it or I could say bottom and move it down to the bottom, et cetera. Now this is a little bit silly because we don't really want the height of 100 on there but we could set something up like that to actually get it to show up and as I said the nice thing with this is then if you have different shapes or different things you just have different SVGs you can just experiment, play around with it get a whole bunch of interesting things going on here but there is another thing that you wouldn't want to use that for and that would be getting the image inside of text which is another really interesting effect but there is a different method you want to do because if you're using an SVG that text won't be selectable screen readers can't read it Google can't read it for SEO and all of that so if you'd like to know a solution on how to do that I have a video right here for viewing pleasure and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick, Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome.