HTML/CSS: Make text overlay but keep video responsive to mouse events (Elementor)-CodePudding

we're kinda new to this whole webpage coding stuff and are currently working on setting up our own wordpress page with custom html/css via wordpress/elementor (but still in the free version, not pro).

We made a video autoplay and react to hover mouse events and mouseclicks, but as we tried to put a text overlay over the videobox with a .overlay class, the overlay class would cover the whole video and the actual video wouldn't react to our mouse. The goal is to display the text over the video, whilst the video itself keeps playing and pausing when hovering over it.

We're using the HTML function of the Elementor plugin.

Any help/advice would be much appreciated.

Here is what we got so far (and yes, we're newbs when it comes to coding, sorry for the messy code I guess):

<style>
    .Maus {
        cursor: pointer;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-family: Times New Roman;
        font-size: 22pt;
        line-height: 22pt;
        text-align: center;
    }
</style>

<div class=Maus>
    <div onm ousedown="openInNewTab('https://private.com/video/');">

        <video loop="this.play()" onm ouseover="this.play()" onm ouseout="this.pause();">
    
        <source src="https://private.com/video.mp4" type="video/mp4">
        </video>
        
         <div class=overlay>
                <p>
                lorem ipsum
                </p>
             
        </div>
        
    </div>
</div>

<script>
    function openInNewTab(url) 
     {
        window.open(url, '_blank').focus();
        }
</script>

here is a screenshot of it:

videofile in elementor widget with text

Tried messing around with the z-index, but failed as elements were overlapping the text so it was behind the video.

CodePudding user response：

You can add pointer-events: none; to make an element let mouse actions "go through it" (to the element behind it)

CodePudding user response：

Use the property I think it will help you:

pointer-events: none;