How to set a video opacity to a linear-gradient opacity on text hover?

Question

I have a video nested in a parent div. I would like to set its opacity to a linear-gradient transparency effect from left to right, 100% to 0%. The idea is to see the video at 100% opacity on the left side and at 0% on the right side.

CONTEXT: The overall goal is to blend two videos together with a different linear-gradient opacity when hovering different text-item elements.

My current code:

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 */
}

You'd have to use an overlay with a gradient....but I suspect that this will not give you the effect you are after. You can't apply `opacity` to **part** of an element. — Paulie_D, Feb 24 '20 at 15:35
yeah, that's what I don't wanna do. :-( The overall goal is to blend two videos together with a `linear-gradient` `opacity` between two videos on a `text-item` `hover`. — hexangel616, Feb 24 '20 at 15:39
Unfortunately, I don't think you can do that. I'm not overly familiar with it but you *might* be able to do something with `canvas` but that's another question. — Paulie_D, Feb 24 '20 at 15:43
Oooh...that's a decent suggestion. - https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image — Paulie_D, Feb 24 '20 at 15:47
`mask-image:linear-gradient(to right, white,transparent)` should do it — Temani Afif, Feb 24 '20 at 15:56
Thank you, I will use that and check into `canvas` effects later. — hexangel616, Feb 24 '20 at 16:00

Arsham · Answer 1 · 2020-03-01T07:49:08.120

from what I understood from your question is that you want to play the video like normal but just have an overlay of linear-gradient over it so the code below shows the linear gradient facing to the right from black to zero opacity

hope this code helps you with your journey

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

How to set a video opacity to a linear-gradient opacity on text hover?

1 Answers1