From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Masking an image with another image

Masking an image with another image

From the course: CSS: Images

Start my 1-month free trial Buy for my team

Masking an image with another image

“

- [Instructor] Now that you know how to add a clip path to an SVG, scale it, to be responsive and then use it as the clip path in CSS, allow me to let you in on a little secret. If you have an existing SVG and you don't want to mess around with it, you just want to use it to clip an image, you don't have to use clip path. You can use another property called mask-image which literally takes an image and uses it as a mask on top of your image. Now, the mask-image property only works with SVGs or generated images like linear gradients or radial gradients. It doesn't work with a regular photo but if you have an SVG, it works fine. So let's take a look at what that would look like. In the exercise files I have the original SVG. So this is what I just export it out of illustrator. It has two paths in it. It has nothing else. There's no click path. There's no additional elements. So this is the SVG. And if I display the…

Contents