Is there a way to create an overlay on a background video without covering other components?
I want the components to remain visible and on top of everything else, with the background video in the far background, followed by the texture layer, and everything layered on top of it.
Please note: I am utilizing the Bulma Framework on WordPress.
I am using all native Bulma classes, except for defining the following for the texture class:
.hero .texture {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:15;
background:url('/wp-content/themes/bulmapress/src/images/texture.png');
}
This is the structure of the code:
<div class="hero-head">
<div class="first_nav">
<header id="header" class="nav-down">
<nav id="site-navigation" class="navbar container" role="navigation">
<div class="navbar-brand">
<?php bulmapress_home_link('navbar-item'); ?>
<?php bulmapress_blog_description('navbar-item is-muted'); ?>
<?php bulmapress_menu_toggle(); ?>
</div>
<div class="navbar-menu">
<div class="navbar-start"></div>
<?php bulmapress_navigation(); ?>
</div>
</nav>
</header>
</div>
</div>
<section class="hero main_hero is-fullheight video">
<div class="texture"></div>
<div class="hero-video">
<video poster="" id="bgvid" playsinline autoplay muted loop preload="auto">
<source src="/wp-content/themes/bulmapress/src/images/compressed.mp4" type="video/mp4">
</video>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="slider-content animated zoomIn pb-6">
<div>
<p class="title is-1 main-text">Semirsmajlovic.com</p>
<p class="subtitle is-4 main-text">Website is under construction :)</p>
</div>
</div>
<span class="scroll-down animated zoomIn">
<svg
width="30px"
height="100%"
viewBox="0 0 247 390"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
"
>
<path id="wheel" d="M123.359,79.775l0,72.843" style="fill: none; stroke: #fff; stroke-width: 20px;" />
<path
id="mouse"
d="M236.717,123.359c0,-62.565 -50.794,-113.359 -113.358,-113.359c-62.565,0 -113.359,50.794 -113.359,113.359l0,143.237c0,62.565 50.794,113.359 113.359,113.359c62.564,0 113.358,-50.794 113.358,-113.359l0,-143.237Z"
style="fill: none; stroke: #fff; stroke-width: 20px;"
/>
</svg>
</span>
</div>
</div>
</section>
Example image: https://i.sstatic.net/hhP4T.jpg