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 >
  <video></video>
</div>
<div >
  <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?

CodePudding user response：

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

CodePudding user response：

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 >
  <div >
    <video></video>
  </div>
  <div >
    <h1>Caption</h1>
    <div ></div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <video src="https://www.w3schools.com/HTML/movie.mp4" controls autoplay></video>
  </div>
  <div >
    <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.