Getting rid of funny hover behaviour when changing div width - css

Question

I have some videos with a background overlay and text over them and my goal is having this overlay and the text disappearing on hover. I've managed to achieve this but if I change the width of the div containing the text (class .project-content on code below), I get a funny transparency behaviour on hover.
Would anyone be able to help by letting me know how I can modify the width of said div while keeping the intended behavior on hover? Thank you very much!
Here's my code:
HTML
<div class="works-content">
<div class="video-background">
<a href="#" target="_bank">
<div class="video">
<video loop="" muted="muted" poster="" playsinline=""><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>
</div>
</a>
<div class="project-content">
<p class="project-title">TITLE</p>
<p class="project-description">PROJECT DESCRIPTION</p>
</div>
</div>
</div>
CSS
.works-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 60px 30px;
padding: 0px 30px 100px 30px;
}
.video-background {
background: $black;
position:relative;
transition: 0.5s ease;
width: 100%;
}
.video-background:hover {
transform: scale(1.04);
transition: 0.5s ease;
background: white;
}
.video-background:hover .project-title a, .project-description a {
display: none;
}
.video {
transition: 0.5s ease;
opacity: 0.2;
}
.video:hover {
transition: 0.5s ease;
opacity: 1;
}
video {
width: 100%;
}
.project-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.project-content a {
color: white;
}
.project-title a {
font-size: 36px;
letter-spacing: 2px;
font-weight: bold;
border-bottom: 10px solid $yellow;
}
.project-title a:hover {
text-decoration: none;
}
.project-description {
font-size: 36px;
padding-top: 8px;
letter-spacing: 1px;
}
JS
jQuery('.video-background').mouseover(function(){
$('video', this).get(0).play();
}).mouseout(function(){
$('video', this).get(0).pause();
});