Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css.
To see the issue firsthand on my live website, please visit:
I am uncertain whether the problem lies with the JavaScript linked to the element or if video files inherently cover text, so I have shared the full website for easier debugging purposes. Here is the corresponding GitHub repository: https://github.com/kaweepatinn1/kaweepatinn1.github.io
Despite attempting various modifications to the CSS settings and inspecting the element in Developer Tools, I cannot identify the source of the issue since one element behaves flawlessly with seemingly identical CSS code.
The problematic HTML excerpt is as follows:
<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 relevant CSS classes are defined as:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
justify-content: space-evenly;
}
.grid-item{
height: 17w;
margin: 1vw;
}
/* Remaining CSS class definitions can be found above */
If necessary, the associated JavaScript functions are included below:
var mouseOverApple = false;
var mouseWasGoneApple = true;
// Remaining JavaScript functions omitted for brevity