2 replies

Video CSS mask

Hi. I'm new here and wanted to see if anyone could help me with a css problem I got. I need to make a mask for a video like on this video.

<header>
            <video class="video" autoplay playsinline muted loop preload>
                <source src="./video.mp4" />
            </video>
            <div class="container">
                <span class="text">We're here</span>
                <span class="mask"></span>
                <span class="text">to make healthy</span>
                <span class="mask"></span>
                <span class="text">living effortless, so you can</span>
                <span class="mask"></span>
                <span class="text">live longer and happier</span>
                <span class="mask"></span>
            </div>
        </header>

<header>
            <video class="video" autoplay playsinline muted loop preload>
                <source src="./video.mp4" />
            </video>
            <div class="container">
                <span class="text">We're here</span>
                <span class="mask"></span>
                <span class="text">to make healthy</span>
                <span class="mask"></span>
                <span class="text">living effortless, so you can</span>
                <span class="mask"></span>
                <span class="text">live longer and happier</span>
                <span class="mask"></span>
            </div>
        </header>

this is how my current html looks like. I've tried to look up some tutorials, and I've only found tutorials that need white background and black text for the mask to work through

mix-blend-mode: screen;

mix-blend-mode: screen;

. Could you give me any pointers on how to make this thing, please?

KP-C

Kevin Powell - Community•12mo ago•

2 replies

Aisu

Video CSS mask

Hi. I'm new here and wanted to see if anyone could help me with a css problem I got. I need to make a mask for a video like on this video.

<header>
            <video class="video" autoplay playsinline muted loop preload>
                <source src="./video.mp4" />
            </video>
            <div class="container">
                <span class="text">We're here</span>
                <span class="mask"></span>
                <span class="text">to make healthy</span>
                <span class="mask"></span>
                <span class="text">living effortless, so you can</span>
                <span class="mask"></span>
                <span class="text">live longer and happier</span>
                <span class="mask"></span>
            </div>
        </header>

<header>
            <video class="video" autoplay playsinline muted loop preload>
                <source src="./video.mp4" />
            </video>
            <div class="container">
                <span class="text">We're here</span>
                <span class="mask"></span>
                <span class="text">to make healthy</span>
                <span class="mask"></span>
                <span class="text">living effortless, so you can</span>
                <span class="mask"></span>
                <span class="text">live longer and happier</span>
                <span class="mask"></span>
            </div>
        </header>

this is how my current html looks like. I've tried to look up some tutorials, and I've only found tutorials that need white background and black text for the mask to work through

mix-blend-mode: screen;

mix-blend-mode: screen;

. Could you give me any pointers on how to make this thing, please?

Video CSS mask

Similar Threads

Video CSS mask

Similar Threads

Similar Threads

Similar Threads