CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Elvis
Elvis

Reputation: 1143

How do I hide a div behind a video element?

I've placed a video above a div background, The video has black background and for the video background to not be visible, I've used mix-blend-mode: screen.

Everything is working fine till now. The problem is when another elements gets behind the video (onclick animation), but still that element is visible, since the video's blend mode is screen.

Is there any way to hide the second div, when it is behind the video ?

 video {
    position: absolute;
    margin-top: 0px;
    margin-left: 50px;
mix-blend-mode: screen;
  pointer-events:none;
}`

This is the background (don't know if it is releveant or not)

    .background{
background-color: #7a7f83;
}

The color of the second div is bright (yellow, blue,etc)

Edit: here's the shorter version. Consider 2 divs and a video. one div is background and one is a rectangle. I want to place video above both the divs, and I've kept the video blend mode to screen. Now as you may know, since the video blend mode is screen, everything behind the video is visible. I want the background div to be visible but not the rectangle div. Is there a way to hide the part of the rectangle div which is behind the video ?

Upvotes: 0

Views: 690

Answers (1)

ICE
ICE

Reputation: 1737

Example #1

Set Square class position to the absolute and parent (background) position to the relative.

.square{background-color: red;width: 100px;height: 100px;position: absolute; top: 50%; left: 50%;}
.background{position: relative;}

and your video is inside background class element. like this:

<div class="background">
    <video>...</video>
    <div class="square">SQUARE CLASS</div>
</div>

if you are using z-index for video tag, your square z-index must be higher than that.

Result:

enter image description here

and after that If you want hide the square, just change it to the display:none; and when you need it to show change it to display: block;

Example #2

Do whatever you did in example #1 but you need to change your HTML like this:

<div class="main">
    <div class="square">SQUARE CLASS</div>
    <div class="background">
        <video>...</video>
    </div>
</div>

and main class position must be relative. just like background class.

Result:

enter image description here

Upvotes: 1

Related Questions