5 마스크
미리보기
이미지다운로드
이미지다운로드
1. 예제1-이미지
- Figma
- html
- css
- Figma 에서 마스크용 이미지를 그린다.
- card.svg로 저장한다.
1 <div class="flex">2 <figure class="item">3 <a href="#">4 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />5 <figcaption>6 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis7 minima veniam vel mollitia reprehenderit velit explicabo impedit8 officiis iusto, in ducimus eius esse! Quia aliquid harum dicta id natus.9 </figcaption>10 </a>11 </figure>12 <figure class="item">13 <a href="#">14 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />15 <figcaption>16 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis17 minima veniam vel mollitia reprehenderit velit explicabo impedit18 officiis iusto, in ducimus eius esse! Quia aliquid harum dicta id natus.19 </figcaption>20 </a>21 </figure>22 <figure class="item">23 <a href="#">24 <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" />25 <figcaption>26 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis27 minima veniam vel mollitia reprehenderit velit explicabo impedit28 officiis iusto, in ducimus eius esse! Quia aliquid harum dicta id natus.29 </figcaption>30 </a>31 </figure>32 </div>33 <div class="video_box">34 <video src="./images/video.mp4" autoplay muted loop></video>35 </div>1 body {2 background: gray;3 }4
5 .flex {6 display: flex;7 width: 80%;8 margin:10rem auto;9 column-gap: 5%;10 }11
12 .item {13 position: relative;14 width: 30%;15 height: 495px;16 background: transparent;17 box-sizing: border-box;18 padding: 30px;19 cursor: pointer;20 transition: all 0.4s ease;21 }22
23 .item:hover:before {24 background: rgba(0, 0, 0, 1);25 }26
27 .item:before {28 content: "";29 position: absolute;30 top: 0;31 left: 0;32 width: 100%;33 height: 100%;34 mask-image: url('./images/card.svg');35 mask-repeat: no-repeat;36 mask-size: 100%;37 background: rgba(255, 255, 255, 1);38 transition: all 0.4s ease;39 }40
41 .item:after {42 position: absolute;43 content: '';44 background: rgba(0, 0, 0, 0.15);45 height: 100%;46 width: 1px;47 right: -30px;48 top: 0;49 }50
51 img,52 figcaption {53 position: relative;54 width: 100%;55 top: 0;56 }2. 예제2-비디오
- html
- css
1<div class="video_box">2 <video src="./images/video.mp4" autoplay muted loop></video>3</div>1 .video_box {2 position: relative;3 padding-bottom: 56.85%;4 height: 0;5 overflow: hidden;6 }7
8 video {9 position: absolute;10 width: 100%;11 height: 100%;12 mask: url('./images/card.svg') no-repeat 50px 0, url('./images/card.svg') no-repeat 550px 300px;13 mask-size: 260px, 150px;14 }