[您好,我正在尝试对卡片进行悬停效果,但是我基本上无法想象悬停时我需要图像占据高度的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%;
}
`;
我基本上不能在不超过最大高度的情况下缩放图像
示例:
您可以使用background-size
代替transform
在此处检查更新的代码
https://codesandbox.io/embed/sparkling-sun-h66es?fontsize=14&hidenavigation=1&theme=dark
您也可以使用overflow:auto
将图像包裹在div中,并使用transform
缩放图像>