按我现在的代码来，斜角会遮住文字，我想让文字显示在斜角上方，该怎么做？<figure class="test5">
<img src="image/2.jpg"/>
<figcaption>
<div class="text">
<h2>动画</h2>
<p>路人甲到此一游</p>
</div>
<div></div>
</figcaption>
</figure>CSS代码：figure{position: relative;width: 25%;overflow: hidden;float: left;}
figcaption{position: absolute;top: 0;left: 0;font-family: "宋体";color:red;}
.test5 figcaption{width: 100%;height: 100%}
.text {position:absolute;padding-left: 40%;padding-top: 70%;z-index: 1}
.test5 figcaption div{position:absolute;width: 120%;height: 100%;
background-color: #9d9d9d;transform: translate(0px,200px) rotate(165deg);}
.test5:hover figcaption div{}
1 回答
已采纳
qq_青枣工作室_0
TA贡献446条经验 获得超754个赞
<!DOCTYPE html>
<style>
figure{position: relative;width: 25%;overflow: hidden;float: left;}
figcaption{position: absolute;top: 0;left: 0;font-family: "宋体";color:red;}
.test5 figcaption{width: 100%;height: 100%}
.text {position:absolute;padding-left: 40%;padding-top: 70%;z-index: 1;transition:all .5s;}
.test5 figcaption::after{content:'';position:absolute;width: 120%;height: 100%;
background-color: #9d9d9d;transform: translate(0px,200px) rotate(165deg);}
.test5:hover .text{padding-top:47%;}
</style>
<figure class="test5">
<img src="image/2.jpg"/>
<figcaption>
<div class="text">
<h2>动画</h2>
<p>路人甲到此一游</p>
</div>
</figcaption>
</figure>
- 1 回答
- 0 关注
- 1244 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消