<!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 關注
- 4046 瀏覽
添加回答
舉報
0/150
提交
取消