卡片悬停动画比例背景

问题描述 投票:0回答:1

[您好,我正在尝试对卡片进行悬停效果,但是我基本上无法想象悬停时我需要图像占据高度的100%,并且文本需要更改颜色像这样的东西:

enter image description here

代码:

<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

css reactjs
1个回答
0
投票

您可以使用background-size代替transform

在此处检查更新的代码

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

您也可以使用overflow:auto将图像包裹在div中,并使用transform缩放图像>

© www.soinside.com 2019 - 2024. All rights reserved.