hoverした時に背景画像のみ拡大させたいです
解決したいこと
Boxコンポーネントにhoverした時に、背景画像のみを拡大するようにしたいです。
現状では背景画像とテキストも一緒に拡大されてしまっています
コード
<Box
style={{
height: 350,
transition: "transform .6s ease",
borderRadius: "10px",
overflow: "hidden",
}}
sx={{
"&:hover .bg-image": {
transform: "scale(1.2)", //拡大値
},
}}
>
<Box
className="bg-image"
style={{
backgroundImage: `url(${test6})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
height: "100%",
transition: ".3s ease-in-out", // 滑らかに拡大
position: "relative",
zIndex: 0,
}}
>
<Grid
container
style={{
display: "flex",
flexDirection: "column",
justifyContent: "flex-end",
paddingTop: 260,
position: "absolute",
pointerEvents: "none",
}}
>
<Grid item xs={12} style={{
backgroundColor: "rgba( 255, 255, 255, 0.85 )",
pointerEvents: "none",
}}>
<Box>
<Typography
style={{
fontSize: 18,
color: "#333333",
}}
>
日付
</Typography>
</Box>
</Grid>
<Grid item xs={12} style={{
backgroundColor: "rgba( 255, 255, 255, 0.85 )",
pointerEvents: "none",
}}>
<Box
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "16px",
}}
>
<Typography
style={{
fontSize: 22,
color: "#333333",
fontWeight: "bold",
}}
>
タイトル
</Typography>
</Box>
</Grid>
</Grid>
</Box>
</Box>
0 likes
