Линейный градиент при наведении фонового изображения

Question

Привет! Я пытаюсь добавить линейный градиентный фон к своему фоновому изображению, как если бы это был эффект наложения, но безуспешно

код:

const Test = styled.div`
  width: 100%;
  height: 80vh;
  background-position: center center;
  background-size: cover;
  background-image: url("https://ak5.picdn.net/shutterstock/videos/16730485/thumb/1.jpg");
  cursor: pointer;
  :hover{

  }
`;

export default function App() {
  return <Test />;
}

пример:

https://codesandbox.io/s/hungry-bardeen-zl72m

Answer 1

Попробуйте это: https://codesandbox.io/s/bold-curie-2p32m

const bgImage = `url("https://ak5.picdn.net/shutterstock/videos/16730485/thumb/1.jpg")`
const bgGradient = `linear-gradient(to right, #f003, #0f03)`

const Test = styled.div`
  width: 100%;
  height: 80vh;
  background-position: center center;
  background-size: cover;
  background-image: ${bgImage};
  cursor: pointer;

  &:hover {
    background-image: ${bgGradient}, ${bgImage};
  }
`;

export default function App() {
  return <Test />;
}