Как установить непрозрачность видео для линейного градиента при наведении текста?

Question

У меня есть video, вложенный в родительский div. Я бы хотел установить opacity на linear-gradient эффект прозрачности от left to right, 100% to 0%. Идея состоит в том, чтобы посмотреть видео на 100% opacity с левой стороны и на 0% с правой стороны.

КОНТЕКСТ: Общая цель состоит в том, чтобы смешать два видео вместе с разные linear-gradient opacity при наведении на элементы text-item.

Мой текущий код:

HTML

<div class="media">
  <video class="media__item" autoplay muted>
    <source src="src.mp4" type="video/mp4" />
    Your browser doesn't support the video tag.
  </video>
</div>

CSS

.media {
  width: 320px;
  height: 240px;
}

.media__item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  opacity: 50%; /* this is wrong */
}

Answer 1

из того, что я понял из вашего вопроса, вы хотите воспроизвести видео как обычно, но просто наложите на него линейный градиент, поэтому код ниже показывает линейный градиент, направленный вправо от черного до нулевой непрозрачности

надеюсь, что этот код поможет вам в вашем путешествии

.media{
    background: linear-gradient(to right, #000000, rgba(19, 19, 19, 0));
    }
    
.media__item {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

<div class="media">
      <video class="media__item" autoplay muted>
        <source src="src.mp4" type="video/mp4" />
        Your browser doesn't support the video tag.
      </video>
    </div>