title: How to create a black color overlay ontop of a video with CSS?
body: <p>Hello my fellow programmers,</p>
  <p>So I am having a hard time creating a black color about 50% opacity overlay ontop of my  tags.</p>
  <p>So check this out:</p>
  <pre><code>       &lt;div class=&quot;section s1&quot;&gt;
          &lt;h1&gt;&quot;The Reaper&quot;&lt;/h1&gt;
          &lt;h2&gt;Limited edition watch&lt;/h2&gt;
          &lt;img src=&quot;assets\img\watch.png&quot; alt=&quot;Watch&quot;&gt;
  
          &lt;div class=&quot;video-container&quot;&gt;
  
              &lt;video data-autoplay loop muted poster=&quot;assets\img\hero-1.jpg&quot;&gt;
                  &lt;source src=&quot;assets\img\video.webm&quot; type=&quot;video/WebM&quot;&gt;
              &lt;/video&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>and the CSS:</p>
  <pre><code>.s1{
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }
  
  .s1 h1{
      position: relative;
      text-align: center;
      color: white;
      font-size: 3rem;
      font-family: Georgia, 'Times New Roman', Times, serif;
      z-index: 1;
      left: 0px;
      width: 50%;
      display: inline-block;
      animation: fadein 5s;
      -moz-animation: fadein 5s;
      /* Firefox */
      -webkit-animation: fadein 5s;
      /* Safari and Chrome */
      -o-animation: fadein 5s;
      /* Opera */
  }
  
  .s1 h2 {
      position: relative;
      text-align: center;
      color: white;
      font-size: 1rem;
      font-family: Georgia, 'Times New Roman', Times, serif;
      z-index: 1;
      left: 0px;
      width: 50%;
      display: inline-block;
      animation: fadein 5s;
      -moz-animation: fadein 5s;
      /* Firefox */
      -webkit-animation: fadein 5s;
      /* Safari and Chrome */
      -o-animation: fadein 5s;
      /* Opera */
  }
  
  .s1 img{
      position: absolute;
      right: 0px;
      top: 0px;
      height: 100%;
      z-index: 1;
      display: inline-block;
      -webkit-animation: slide 3s forwards;
      animation: slide 3s forwards;
  }
  
  
  
  .video-container{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index:0;
      overflow: hidden;
  } 
  
  .s1 video{
      position: absolute;
      top: 0;
      left: 0;
      object-fit: cover;
      width: 100%;
      height: 100%;
      z-index:0;
      pointer-events: none;
  }
  
  #video-container:before {
      content: &quot;&quot;;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 2;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(17, 17, 17, 0.3));
  }
  </code></pre>
  <p>So the question is: how would i create a black color overlay on my background video?
  Feel free to ask any questions about my question.</p>
  <p>Have a great day!
  Cheers</p>