Css 更改div width时摆脱有趣的悬停行为

我有一些视频的背景覆盖和文字，我的目标是让这个覆盖和文字消失悬停。我已经设法做到了这一点，但是如果我更改包含文本的div的宽度（下面代码中的class。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>

JS

.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;
}

jQuery('.video-background').mouseover(function(){
      $('video', this).get(0).play();
  }).mouseout(function(){
      $('video', this).get(0).pause();
});

---

请去掉php部分，在CSS中转换SCS，并在工作的StackOverflow代码段中仅发布呈现的HTML和CSS，否则我们无法帮助您。谢谢，@MihaiT，刚刚相应地更新了我的代码。下面是您的代码。你所说的“有趣的透明行为”是什么意思？如果你去掉works内容中的填充，闪烁就会消失。@MihaiT，再次感谢你。“有趣的透明行为”只有在我为.project内容指定宽度时才会发生（我想这样做）。因此，当我加上所说的宽度并将鼠标悬停在.video或over.video括号上时，该行为与我预期的一样；但如果我将光标移向视频的中心，也就是说，当我将鼠标悬停在.project content上时，整个视频会得到一个白色半透明的覆盖层作为背景