02_mask

MDN 링크

1-Mask

1. 이미지 다운로드2
2. 실행화면

1-1-이미지에 적용하기

html

<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>

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;
    }

1-2-비디오에 적용하기

html

  <div class="video_box">
    <video src="./images/video.mp4" autoplay muted loop></video>
  </div>

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;
    }