Css 倾斜div上的悬停效果而不更改背景
我需要帮助来改进我的css。我想在一个倾斜的div中做一个悬停效果，而不影响我放在div上的图像Css 倾斜div上的悬停效果而不更改背景,css,hover,css-transitions,skew,Css,Hover,Css Transitions,Skew,我需要帮助来改进我的css。我想在一个倾斜的div中做一个悬停效果，而不影响我放在div上的图像 .overlay框{ 位置：相对位置； 宽度：150px； 高度：150像素； 变换：倾斜（-10度）； 显示：内联块； } .叠加框img{ 身高：100%； 宽度：100%； } .内容{ 位置：绝对位置； 排名：0； 左：0； 身高：100%； 宽度：100%； 背景色：rgba（0,0,0,0）； 文本对齐：居中； 垫面：50%； 不透明度：0； 过渡：易进易出。7秒背景； 过渡：易入易出
.overlay框{
位置：相对位置；
宽度：150px；
高度：150像素；
变换：倾斜（-10度）；
显示：内联块；
}
.叠加框img{
身高：100%；
宽度：100%；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景色：rgba（0,0,0,0）；
文本对齐：居中；
垫面：50%；
不透明度：0；
过渡：易进易出。7秒背景；
过渡：易入易出。7秒不透明度；
}
.内容：悬停{
不透明度：1；
背景色：rgba（0,0,0,8）；
}
.info{
字体大小：6vh；
文字装饰：无；
}
.内容a{
颜色：白色；
文字装饰：无；
}您可以在图像上应用反向倾斜并调整溢出：
.overlay框{
位置：相对位置；
宽度：150px；
高度：150像素；
变换：倾斜（-10度）；
显示：内联块；
溢出：隐藏；
利润率：20px；
}
.叠加框img{
身高：100%；
宽度：计算（100%+40px）；
保证金：自动-20px；
变换：倾斜（10度）；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
身高：50%；
宽度：100%；
背景色：rgba（0,0,0,0）；
文本对齐：居中；
垫面：50%；
不透明度：0；
过渡：易进易出。7秒背景；
过渡：易入易出。7秒不透明度；
}
.内容：悬停{
不透明度：1；
背景色：rgba（0,0,0,8）；
}
.info{
字体大小：6vh；
文字装饰：无；
}
.内容a{
颜色：白色；
文字装饰：无；
}倾斜需要在“内容”中，然后是背景正方形和动画倾斜
<html>
<head>
<style>
.overlay-box
{
position: absolute;
width: 150px;
height: 150px;
display: inline-block;
}
.overlay-box img
{
height: 320px;
width: 380px;
}
.content
{
position: absolute;
margin-left: 25px;
top: 0;
left: 0;
height: 100%;
width: auto;
background-color: rgba(0,0,0,0);
text-align: center;
padding-top: 50%;
opacity: 0;
transform: skew(-10deg);
transition: background .7s ease-in-out;
transition: opacity .7s ease-in-out;
}
.content:hover
{
opacity: 1;
background-color: rgba(0,0,0,.8);
}
.info
{
font-size: 6vh;
text-decoration: none;
}
.content a
{
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<div class="overlay-box">
<img src="Download.jpg" alt="">
<div class="content">
<a href="#" class="info" title="Full Image">SERVIÇOS</a>
</div>
</body>
</html>
.覆盖框
{
位置：绝对位置；
宽度：150px；
高度：150像素；
显示：内联块；
}
.叠加框img
{
高度：320px；
宽度：380px；
}
.内容
{
位置：绝对位置；
左边距：25px；
排名：0；
左：0；
身高：100%；
宽度：自动；
背景色：rgba（0,0,0,0）；
文本对齐：居中；
垫面：50%；
不透明度：0；
变换：倾斜（-10度）；
过渡：背景。7秒轻松进出；
过渡：不透明度。7秒缓进缓出；
}
.内容：悬停
{
不透明度：1；
背景色：rgba（0,0,0,8）；
}
.info
{
字体大小：6vh；
文字装饰：无；
}
.内容a
{
颜色：白色；
文字装饰：无；
}
aclass=“info”skew覆盖框。内容：hover.info.overlay框{
位置：相对位置；
宽度：150px；
高度：150像素；
/*消除歪斜*/
显示：内联块；
}
.叠加框img{
身高：100%；
宽度：100%；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景色：rgba（100100,1）；
文本对齐：居中；
垫面：50%；
不透明度：0；
过渡：易进易出。7秒背景；
过渡：易入易出。7秒不透明度；
}
.内容：悬停{
不透明度：1；
背景色：rgba（0,0,0,8）；
}
.content:hover.info{/*添加此*/
变换：倾斜（-10度）；
}
.info{
字体大小：6vh；
文字装饰：无；
}
.内容a{
颜色：白色；
文字装饰：无；
}