按我现在的代码来,斜角会遮住文字,我想让文字显示在斜角上方,该怎么做?<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 关注
- 1296 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消