Javascript 使用Calc CSS函数后，将Div放置在角落中

我想在calc功能激活后定位文本&在将鼠标悬停在图像上之后， 像这个例子：

我的密码是

#{
位置：绝对位置；
宽度：100%；
最小高度：40vw；
溢出：隐藏；
}
.层{
位置：绝对位置；
宽度：100vw；
最小高度：40vw；
溢出：隐藏；
}
.layer.content wrap{
位置：绝对位置；
宽度：100vw；
最小高度：40vw；
}
.layer.content正文{
宽度：25%；
位置：绝对位置；
最高：50%；
文本对齐：居中；
转化：translateY（-50%）；
颜色：#fff；
z指数：1
}
.图层img{
位置：绝对位置；
宽度：100%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.h1层{
字号：2em；
}
.底部{
背景：#222；
z指数：1；
过渡：所有1000ms立方贝塞尔（0.63,0.04,0.69,1.01）；
}
.bottom:悬停~.top{
宽度：计算（5vw+1150px）；
}
.bottom.content正文{
右：5%；
过渡：所有1000ms立方贝塞尔（0.63,0.04,0.69,1.01）；
}
.bottom:悬停.内容体{
右：50%；
转换：translateX（50%）
}
.底部h1{
颜色：#FDAB00；
}
.顶{
背景：#eee；
颜色：#222；
z指数：2；
}
.top.content正文{
左：5%；
过渡：所有1000ms立方贝塞尔（0.63,0.04,0.69,1.01）
}
.歪斜的.顶部{
变换：倾斜（-20度）；
左边距：-1000px；
宽度：计算（50vw+1000px）；
右边框：10px纯白；
过渡：所有1000ms立方贝塞尔（0.63,0.04,0.69,1.01）
}
.倾斜.顶部：悬停{
宽度：计算（105vw+750px）；
}
.skewed.top:悬停.内容体{
左：50%；
转换：translateX（-50%）
}
.skewed.top.content wrap{
变换：倾斜（20度）；
左边距：1000px；
}
@介质（最大宽度：1023px）{
身体{
字体大小：75%；
}
.歪斜{
显示：无；
}
}

自动化工业
材料手册

@MenaiAlaEddine Aladdin否，如果我输入的代码无效，您可以在此处检查结果@MenaiAlaEddine Aladdin否，如果我输入的代码无效，您可以在此处检查结果