<!DOCTYPE HTML><head> <script type="text/javascript" src="jquery-2.1.4.min.js"> </script> <style type="text/css">.test{ width: 200px; height: 200px; margin: 30px auto; border: 1px solid red;}.img{ width: 200px; height: 200px; background-image: url("images/trustcentre.jpg");}.text{ display: none; width: 200px; height: 200px; transition:all 5s; -webkit-transition:all 5s; -moz-transition:all 5s; -o-transition:all 5s;}.test:hover .text{ display:block; background: #fff; opacity: .5; transform:translate(0px,-200px); -webkit-transform:translate(0px,-200px); -moz-transform:translate(0px,-200px); -o-transform:translate(0px,-200px); -webkit-transform: translate(0px,-200px);} </style></head><body><div class="test"><div class="img"></div><div class="text">鼠标hover 以后，图片上面出现一个遮罩透明度变化，显示设置好的文字，完全使用css 实现鼠标hover 以后，图片上面出现一个遮罩透明度变化，显示设置好的文字，完全使用css </div></div></body></html>
1 回答
我喺黄铭_M君
TA贡献6条经验 获得超2个赞
先理解好transition是怎么一回事吧, .text前后的css属性都对不上
此外display:block/none是没有transition效果的..
把display去掉.. 给.text加上透明度和高度变化..另外你现在的遮罩加在.text错了吧..
要不另外加遮罩要不直接改.img的透明度
.img{
width: 200px;
height: 200px;
background: blue;
opacity: 1;
transition:opacity 3s;
}
.text{
overflow:hidden;
opacity: 0;
height: 0px;
transition:all 3s;
}
.test:hover .img{
opacity:.5;
}
.test:hover .text{
width: 200px;
height: 200px;
opacity: 1;
transform:translate(0px,-200px);
}
- 1 回答
- 0 关注
- 3952 浏览
添加回答
举报
0/150
提交
取消