02 mask

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 debitis
7
        minima veniam vel mollitia reprehenderit velit explicabo impedit
8
        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 debitis
17
        minima veniam vel mollitia reprehenderit velit explicabo impedit
18
        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 debitis
27
        minima veniam vel mollitia reprehenderit velit explicabo impedit
28
        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
    }

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
    }