How to use CSS mix-blend-mode if the containers are siblings? - html

Question

How could we use CSS mix-blend-mode, if the background image/video is not the parent of the element which gets the mix-blend-mode?
For example
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The div with the class .caption-above-video should have a colored background with a mix-blend-mode. But the effect not appears. When using mix-blend-modes somewhere, the element with the blend-mode is the direct child of the parent with the background image, but in this example this is not possible because of a full with and height background video. Also I cannot manipulate the DOM output, because its coming from a page builder.
How could we use CSS mix-blend-mode effects when the containers are siblings?

Answer 1

Mix-blend-mode does not work with siblings.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values

Answer 2

I actually can't see what the problem is.
If you overlay the video with another element (by giving that element position absolute and the same size as the video for example - but there are lots of ways of doing this) and they are siblings (i.e have the same parent) then the mix-blend-mode seems to work perfectly well.
.parent {
width: 80vmin;
position: relative;
}
video {
position: relative;
width: 100%;
}
.caption-above-video {
background: red;
mix-blend-mode: multiply;
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<div class="has-video-background">
<video src="https://www.w3schools.com/HTML/movie.mp4" controls autoplay></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The only thing I did 'extra' was to make the overlaying element have pointer events of none so that I could use the controls on the video. If you need pointer events on the overlay then you'll need to implement the video controls yourself e.g. with JS.

Answer 3

As far as I know, it comes down to which div is on top. So by using position: absolute; and a z-index for example, you add mix-blend-mode to the div that is "on top" of the other div.
I added a code snipped so you can see what I've done to accomplish this.
-I did add a container around the two divs for styling purposes for this example.
-Added an extra div in the .caption-above-video that has the background-color and mix-blend-mode. This is important if you don't want the h1 to be affected by the mix-blend-mode, because that affects all children too.
Also added an background-image to the .has-video-background so you can see the result better. This is for demonstration purposes only and as soon as you add the actual video, the result will be the same.
.container{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 400px;
height: 300px;
}
.has-video-background{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: lightblue;
}
.caption-above-video{
position: absolute;
width: 200px;
height: 150px;
}
h1{
position: relative;
z-index: 2;
color: white;
}
.background-div{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
background-color: green;
}
<div class="container">
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>Caption</h1>
<div class="background-div"></div>
</div>
</div>