Hero Section Video WIth Mix-Blend-Mode Overlay Text

Image: Hero Section Video WIth Mix-Blend-Mode Overlay Text GIF

This snippet by Dudley Storey will help you add a fullscreen video to your website’s hero section with a nice title overlay using mix-blend-mode. This can work well on e-commerce sites.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen Fullscreen Background Video with Mix-Blend-Mode Overlay Text by Dudley Storey (@dudleystorey) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.