Solution 1 :

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

Solution 2 :

Use the property I think it will help you:

pointer-events: none;

Problem :

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):

    .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;

<div class=Maus>
    <div onmousedown="openInNewTab('');">

        <video loop="" onmouseover="" onmouseout="this.pause();">
        <source src="" type="video/mp4">
         <div class=overlay>
                lorem ipsum

    function openInNewTab(url) 
     {, '_blank').focus();

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.


Comment posted by DeanC

One question, we’re trying to make the text “disappear” after hovering for a few seconds over it, wouldn’t this prevent us from doing so? Do you have a tip?

Comment posted by Johannes

it depends how you make it disappear. If by CSS transition, you can use a selector like

Comment posted by DeanC

We tried to do it like that, problem is,

Comment posted by Johannes

well, you can’t have both…

Comment posted by Johannes

but you could create a “fadeout” for the overlay either some seconds after loading or after starting the video, using JS