mask-image lets you do some really cool stuff

Add some creativity to your designs with mask-image!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:30 - Setting things up to fade out the image
00:58 - Fading it out
02:30 - Fixing the layout
03:15 - Improving the fade out
03:52 - Masking with shapes

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

Trying a few things things with how I'm recording and it led to a few spots with some jumpy editing, so sorry about that! I'm working on things and once I get used to it and can record it in a smoother way it should be better :D

[KD-tper]

For the fading background image, I've always used a pseudo element with absolute positioning with a gradient on to get the same effect, but this way is so much easier.

[developer_hadi]

It would be STUNNING if we could animate the masks from one to one using a transition or whatever

[Trekiros]

I've used mask-image for a carousel type component, using this as the mask image:
linear gradient to right
0% transparent
1em black
calc(100% - 1rem) black
100% transparent

and then I gave the element in the carousel a horizontal padding of 1 rem
Super simple way to make the carousel look a bit fancier

[zanzaboonda]

I just wanted to say that I really appreciated the pacing of this video. Silver of your older videos went just a little bit fast for me (harder to follow as a non-expert), but I noticed you explained more in a very deliberate way (mentioning shortcut keys, explaining the thought process a little more, etc.). Anyways, this was perfect. Thank you.

[claudettebentley]

OMG Mr Kevin Powell!! I am on old dog learning new tricks for a current project and YOU SIR are saving me so many hours of research. So far 3 of your videos have helped me out and I am sure I will be watching a bunch more. I will be a flexbox expert because of you. <3

[notuzzi]

I love that all your tutorials are deep and step by step, even a slow learner like me understand it quickly so you are the best 👌

[ShawnRitch]

Great job Kevin. Love that you gave a few options as well :)

[emmanuelameyaw]

Thanks so much, sir! I am so enlightened. Your videos are really helping my CSS and even SASS. Thanks again, sir!

[BigSmoke-rw]

Omg! This is a really great content and tutorial! First time of knowing about css masking! Thank you so much!

[AlexStefan-vsdj]

So i dont know how youtube algorithm works, but just 3 hours ago i was thinking about how can i make strange custom shape images with clip path, and this video from kevin shows up on my feed like it's destiny. Oh god.. ❤

[photomat]

I love looking into more options to solutions like this. However, in the beginning of the video, there is a remark regarding we want to avoid having to go to a graphics programme for a non-square image. The solution is then, an image, as a mask, which you also need to create in a gfx app. Basically the step you need to do anyway is moved towards the web (masking real time vs masking in application). Doing it in an app makes it easier to place the map (although we do like tinkering with values in CSS :P). I also don't think you'd re-use either the mask or the masked image in more than one project (assuming the client wants a tailored design). Therefore, the main use case for this I can see is (part of) a logo or brand style element that is repeated onto different images on the site. Which other use cases are there?

[zer]

Why i have not start to learn HTML/CSS and JS 20 Years ago? I am Always staggered to see what a Master can do with CSS. I love your Videos!

[bradleyandrews]

sometimes i feels like u post video to solve problems that I am having right at this very moment I swear

[Anderson-iyji]

very cool my godfather, css keeps getting better 👍

[fscaramuzza]

I still will fall madly deeply in love with CSS :)

[sambaraka]

Never really thought of this as a possibility. Man I need to get better at design. This looks sick!!

[PeppertopComics]

At 4:10 you say about using SVGs that 'have no copyright on them'. Be aware that in many (most?) countries documents and images are copyrighted by default, so you'll need to have an explicit license to use them: lack of a license does _not_ mean they're in the public domain or free to use. Fortunately there are a lot of SVG files under Creative Commons and similar licenses, but it's something to bear in mind, particularly in a commercial setting.

[pibbz]

LOL, this is big tech in a nutshell. I left my current project to make dinner, knowing i would have to find a solution for exactly this when I got back. Talk about being served a solution on a silver platter in the meantime 😅

[paterfamilias]

For example one, another way to achieve that effect for the background img + gradient is to use the below syntax:

background: linear-gradient(color1, color2), url(path/to/img) center / cover no-repeat

I understand this video is to show how to use mask image but just wanted to share haha