Карточка анимации наведения масштаба

Question

Здравствуйте, я пытаюсь сделать эффект наведения на мою карту, но я не могу себе представить, когда он на самом деле, мне нужно, чтобы мое изображение занимало 100% моего роста, а мой текст менял цвет примерно так:

код:

<Div
  onMouseOver={() => setisHover(true)}
  onMouseOut={() => setisHover(false)}
  isHover={isHover}
>
  <div className="bg-img" />
  <div className="text">
    <h3>Testing</h3>
  </div>
</Div>

css:

const Div = styled.div`
  margin: 50px;
  width: 60vw;
  height: 50vh;
  cursor: pointer;
  & .bg-img {
    height: 50%;
    background-image: url("https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&w=1000&q=80");
  }
  & .text {
    text-align: center;
    margin-top: 20px;
    width: 100%;
    height: 50%;
  }
`;

Я в принципе не могу масштабировать мое изображение без превышения максимальной высоты

пример:

https://codesandbox.io/s/recursing-ardinghelli-i4t2p

Answer 1

Я думаю, вы должны поместить их с position:absolute и поиграть с ним.

проверьте здесь обновленный код

https://codesandbox.io/embed/sparkling-sun-h66es?fontsize=14&hidenavigation=1&theme=dark