Html – CSS Styles not giving the expected result

I’m using the same CSS styles for two different elements of different panels, but one shows the text I would like, while the other doesn’t. The relevant css file is named grid.css.

I am linking to the currently hosted version of my website, which has the relevant issue: https://nanomotions.org/

I’m not sure if it has to do with the javascript linked to the element or if video files inherently move over text, so I’ve decided to link the full website for easier debugging of the cause. Here is the relevant github: https://github.com/kaweepatinn1/kaweepatinn1.github.io

I’ve tried messing around with the css settings, looking around for the element in inspect element, ect, but I can’t seem to see the problem when one element works perfectly with supposedly the same CSS code.

Here is the area of HTML in question:

      <a href="TO SET">
<div class="applead grid-item" onmouseover="regifApple()" onmouseleave="revertApple()">
<img class="img" id="appleimage" width="100%" height="auto" src="./static/assets/applead.webp" alt="Applead Image">
  <div class="img-caption">
    <div class="vid-title">
      Mock Apple Ad
    </div>
    <div class="vid-director">
      Animation and Motion Graphics
    </div>
  </div>
</img>
</div>
</a>
<a href="TO SET">
  <div class="OYYGC grid-item" onmouseover="regifOYYGC()">
  <video class="img" id="OYYGCimage" width="100%" height="auto" src="./static/assets/OYYGC.mp4" loop muted="muted" alt="OYYGC">
    <div class="img-caption">
      <div class="vid-title">
        Oh Yeah You Gonna Cry?
      </div>
      <div class="vid-director">
        Animated x Live Music Video
      </div>
    </div>
  </video>
  </div>
  </a>

The CSS for these classes:

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
  }

.grid-item{
    height: 17w;
    margin: 1vw;
}

.vid-title{
    width:100%;
    position:absolute;
    text-align:center;
    top:50%;
    font-weight:400;
    font-size:1vw;
    letter-spacing:0.2vw;
    color:white;
    -webkit-transform:translate3d(0,-50%,0);
    transform:translate3d(0,-50%,0);
    padding:0px 15px;
    box-sizing:border-box;
}

.vid-director{
    color:white;
    opacity:0.5;
    font-size:0.5vw;
    letter-spacing:0.1vw;
    font-weight:100;
    width:100%;
    position:absolute;
    text-align:center;
    bottom:5px;
}

.img {
    transition: filter 0.3s ease;
    filter: brightness(100%);
  }

.applead {
    position: relative;
    overflow: hidden;
    font-family: Roboto, sans-serif;
}
  
.applead img {
    display: block;
    width: 100%;
    height: auto;
}

.applead .img-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

.applead:hover .img-caption {
    opacity: 1;
  }

.applead:hover .img {
    filter: brightness(50%);
  }

.OYYGC {
    position: relative;
    overflow: hidden;
    font-family: Roboto, sans-serif;
}
  
.OYYGC img {
    display: block;
    width: 100%;
    height: auto;
}

.OYYGC .img-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

.OYYGC:hover .img-caption {
    opacity: 1;
  }

.OYYGC:hover .img {
    filter: brightness(50%);
  }

javascript, if relevant:

var mouseOverApple = false;
var mouseWasGoneApple = true;

$(document).ready(function(){
    $(document).mousemove(function(){
         if($("#appleimage:hover").length != 0){
            mouseOverApple = true;
        } else{
            mouseOverApple = false;
        }
        if($("#OYYGCimage:hover").length != 0){
            mouseOverOYYGC = true;
        } else{
            mouseOverOYYGC = false;
            revertOYYGC();
        }
    });
});

function regifApple(){
    if (mouseWasGoneApple == true){
    let content = document.getElementById("appleimage");
    content.src = "./static/assets/applead.gif";
    mouseWasGoneApple = false;
    }
}

function revertApple(){
    if (mouseOverApple == false){
        let content = document.getElementById("appleimage");
        content.src = "./static/assets/applead.webp";
        mouseWasGoneApple = true;
    }
}

var mouseOverOYYGC = false;
var mouseWasGoneOYYGC = true;
var toActivateOYYGC = false;

function regifOYYGC(){
    if (mouseWasGoneOYYGC == true){
    let content = document.getElementById("OYYGCimage");
    content.play();
    mouseWasGoneOYYGC = false;
    }
}

function revertOYYGC(){
    let content = document.getElementById("OYYGCimage");
    content.pause();
    content.currentTime = 0;
    mouseWasGoneOYYGC = true;
}