[미리보기](https://qwerewqwerew.github.io/source/css/10-svg/6.html)

[이미지다운로드](http://qwerew.cafe24.com/images/1.jpg) ## 1. 예제1-이미지 1. Figma 에서 마스크용 이미지를 그린다. 2. card.svg로 저장한다. ![alt](https://media.coalacoding.com/imgs/2026-03-08_221032.png) ```html

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis minima veniam vel mollitia reprehenderit velit explicabo impedit officiis iusto, in ducimus eius esse! Quia aliquid harum dicta id natus.

``` ```css body { background: gray; } .flex { display: flex; width: 80%; margin:10rem auto; column-gap: 5%; } .item { position: relative; width: 30%; height: 495px; background: transparent; box-sizing: border-box; padding: 30px; cursor: pointer; transition: all 0.4s ease; } .item:hover:before { background: rgba(0, 0, 0, 1); } .item:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mask-image: url('./images/card.svg'); mask-repeat: no-repeat; mask-size: 100%; background: rgba(255, 255, 255, 1); transition: all 0.4s ease; } .item:after { position: absolute; content: ''; background: rgba(0, 0, 0, 0.15); height: 100%; width: 1px; right: -30px; top: 0; } img, figcaption { position: relative; width: 100%; top: 0; } ``` ## 2. 예제2-비디오 ```html

``` ```css .video_box { position: relative; padding-bottom: 56.85%; height: 0; overflow: hidden; } video { position: absolute; width: 100%; height: 100%; mask: url('./images/card.svg') no-repeat 50px 0, url('./images/card.svg') no-repeat 550px 300px; mask-size: 260px, 150px; } ```

5_마스크

구문

1. 예제1-이미지

2. 예제2-비디오

5_마스크

구문

1. 예제1-이미지

2. 예제2-비디오