                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3图片动态提示效果

为什么按照老湿的方法就弄不出来底部掀起来一块的作业呢？？？？

.test5{ background:#000;}
.test5 figcaption{ width:100%; height:100%;}
.test5 figcaption div{ background: #fff; width:130%; height:100%; position:absolute; transform:translate(0,35px) rotate(0deg); transform-origin:0 0; opacity:0.5;}
.test5:hover figcaption div{transform:translate(0,35px) rotate(-15deg); opacity:0.9;}
.test5:hover img{opacity:0.5;transform:translate(0,-10px);}
.test5 figcaption h2{margin:15% 0 0 10%; transform:translate(0,50px); opacity:0;}
.test5 figcaption p{ margin:50% 0 0 80%; transform:translate(0,50px); opacity:0; color:#000;}
.test5:hover figcaption h2{ transform:translate(0,0); opacity:1; transition-delay:0.2s;}
.test5:hover figcaption p{ transform:translate(0,0); opacity:1; transition-delay:0.3s;}

<figure class="test5">
<img src="005.jpg">
<figcaption>
<h2>图片标题</h2>
<p>斜角动画</p>
<div></div>
</figcaption>
</figure>

现在效果是瞎搞出来了，但是P标签的黑色字却被挡在了后面

明哥就是神

2015-08-25

源自：CSS3图片动态提示效果 4-1

关注问题我要回答

947

操作

收起

2 回答

明哥就是神提问者
2015-08-25

不好意思，修正一下P标签的margin:75% 0 0 80%，75%改成65%

1 回复有任何疑惑可以回复我~

收起回答

明哥就是神提问者
2015-08-25

搞定了，把H2和P标签绝对定位一下，再把P标签拿到最上面来就OK了，附上CSS给同样搞不定的同学学习：

.test5{ background:#000;}
.test5 figcaption{ width:100%; height:100%;}
.test5 figcaption div{ background: #fff; width:130%; height:100%; position:absolute; transform:translate(0,350px) rotate(0deg); transform-origin:0 0; opacity:0.5;}
.test5:hover figcaption div{transform:translate(0,350px) rotate(-15deg); opacity:0.9;}
.test5:hover img{opacity:0.5;transform:translate(0,-10px);}
.test5 figcaption h2{margin:15% 0 0 10%; transform:translate(0,50px); opacity:0; position:absolute;}
.test5 figcaption p{ margin:75% 0 0 80%; transform:translate(0,50px); opacity:0; color:#000;position:absolute; z-index:9999;}
.test5:hover figcaption h2{ transform:translate(0,0); opacity:1; transition-delay:0.2s;}
.test5:hover figcaption p{ transform:translate(0,0); opacity:1; transition-delay:0.3s;}