更改div宽度时摆脱有趣的悬停行为

如何解决更改div宽度时摆脱有趣的悬停行为

我有一些带有背景叠加层的视频和文本，我的目标是要有这个叠加层，并且文本会在悬停时消失。我已经设法实现了这一点，但是如果我更改了包含文本的div的宽度（下面的代码为 .project-content 类），则在悬停时会出现有趣的透明行为。

任何人都可以通过让我知道如何在保持悬停时预期的行为的情况下修改div的宽度来提供帮助吗？非常感谢！

这是我的代码：

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"><a href="#">TITLE</a></p>
      <p class="project-description"><a href="#">PROJECT DESCRIPTION</a></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();
});