Creating a semi-transparent object over background video in CSS / HTML -


this question has answer here:

i'm having issue don't quite understand, have background video on website, , wanted put floating textbox on it. problem is, background color , borders of textbox seem ignore z-index , hide behind background video, no matter do, while text seem show in front of video. way fix this? has been incredibly frustrating problem me.

.fp-newbox {        background-color: rgba(170,170,170,0.4);    box-shadow: 0 10px 18px -10px rgba(0,0,0,0.3);    border: solid 1px rgba(170,170,170,0.6);    border-radius: 6px;    z-index: 30000;  }    /* homepage video */    .fp-video {    overflow: hidden;    z-index: -100;  }    .fp-video-inside {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;  }
<div class="fp-video">      <video loop muted autoplay poster="img/videoframe.jpg" class="fp-video-inside">      <source src="/wp-content/manual-uploads/earn-us-degree-long.mp4" type="video/mp4">    </video>      <div style="padding: 30px; height: 600px;">      <div class="fp-newbox" width="1000px">        <h4 style="padding: 10px; text-align: center; color: rgba(255,255,255,0.8);">a floating title</h4>      </div>    </div>    </div>

you can try force position: relative .fp-video div. in many cases fixes z-index issue.


Comments

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

matplotlib support failed in PyCharm on OSX -

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -