5-마스크

참고

미리보기 파일다운로드

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

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