Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fullscreen Background Video with Mix-Blend-Mode Overlay Text
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.jpg" playsinline autoplay muted loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/fashion.mp4" type="video/mp4">
</video>
<header>
<h1>ZIGGY</h1>
<nav>
<a href="#">Men</a>
<a href="#">Women</a>
<a href="#">Stores</a>
<a href="#">Contact</a>
</header>
<div id="fashion">
<h2>There’s a brand new dance but I don’t know its name…</h2>
</div>
@font-face {
font-family: Moderne Sans;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moderne_sans.woff2)
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #000;
background-size: cover;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
}
div#fashion {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
header {
position: fixed;
width: 100%;
text-align: center;
color: white;
transition: .4s;
}
header:hover {
background: white;
color: #000;
}
h1 {
font-family: Moderne Sans, sans-serif;
text-align: center;
font-size: 2rem;
width: 100%;
letter-spacing: .5rem;
}
nav a {
text-decoration: none;
color: inherit;
padding: 1rem;
}
h2 {
font-family: Century Schoolbook;
font-size: 8vmin;
text-align: center;
margin: 2rem 3rem 0;
mix-blend-mode: overlay;
color: #fff;
font-weight: 100;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.