mix-blend-mode
CSS property will decides how a text/ element should display on page depends on the parent elements background.
In below youtube video, I have covered this blog already so incase you do not want to read through you can watch it as well:
mix-blend-mode
This property works briefly same as photoshop’s blend modes. Web/ Graphic designers are very well aware of this modes. It is being used to make photograph more attractive, to blend two/more photos into one.
Text over Video
To display a text over a video we will use this mix-blend-mode
CSS3 property. So the html to display text over video will be as below:
<video autoplay loop muted>
<source src="bugs-bunny.mp4" type="video/mp4" />
</video>
<h1>Bunny</h1>
In the code above, I have used an html5 video tag and then an H1 to display text. Main part of the trick is the CSS which will be like as below:
video {
width: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
height: 100vh;
}
h1 {
background-color: #fff;
mix-blend-mode: screen;
font-size: 15rem;
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
word-break: break-all;
}
In the CSS, I have placed video with an absolute position and covered whole page with the video. In the H1
, I have used mix-blend-mode: screen
, which will set the text transparent so the video below it will display in the text.
There are other values of mix-blend-mode, which I have listed below:
/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;
Read more on mix-blend-mode from MDN Web Doc