5 마스크
예제1-이미지
- html
- css
<div class="flex"> body {
<div class="flex"> <figure class="item"> <a href="#"> <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /> <figcaption> 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. </figcaption> </a> </figure> <figure class="item"> <a href="#"> <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /> <figcaption> 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. </figcaption> </a> </figure> <figure class="item"> <a href="#"> <img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /> <figcaption> 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. </figcaption> </a> </figure> </div> <div class="video_box"> <video src="./images/video.mp4" autoplay muted loop></video> </div>
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-비디오
- html
- css
<div class="video_box"> .video_box {
<div class="video_box"> <video src="./images/video.mp4" autoplay muted loop></video></div>
.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; }